创建实例
诚然,对于简单的GET和POST请求,只需要设置一个目标URL和对应的HTTP请求体即可:
import axios from 'axios';
axios.get('http://192.168.0.150:80/about')
.then(response => {
console.log(response.data);
});
axios.post('http://192.168.0.150:80/auth', { name: 'develon', password: '123456' })
.then(response => {});
但是对于同一类请求,通常需要配置,可以创建一个axios实例,将通用配置进行抽象。
请看axios与实例相关的接口:
export interface AxiosStatic extends AxiosInstance {
create(config?: AxiosRequestConfig): AxiosInstance;
Cancel: CancelStatic;
CancelToken: CancelTokenStatic;
isCancel(value: any): boolean;
all<T>(values: (T | Promise<T>)[]): Promise<T[]>;
spread<T, R>(callback: (...args: T[]) => R): (array: T[]) => R;
}
- example: 创建固定URL的axios实例 API
const API = axios.create('http://192.168.0.150:80');
API.post('/login', { name: 'develon', password: '123456' })
.then(response => {});
axios本身是一个函数,get post等是别名
axios本身是一个wrap函数,可以通过将相关配置传递给axios来发出请求。
import axios from 'axios';
// axios(url[, config]) 默认发出GET请求
axios("http://192.168.0.150", { hreaders: {} }).then(response => {});
// axios(config) 在config中指定method等指标
axios({
method: 'POST',
url: "http://192.168.0.150/auth",
data: { name: 'develon', password: '123456' },
}).then(response => {});
axios.get
、axios.post
、axios.head
、axios.options
等静态方法其实都是axios函数的别名。
使用别名方法时,就无需再在config中指定url,method和data属性了。
响应
axios.get('/user/12345')
.then(response => {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config); // 发送请求时的相应配置
});
默认配置
全局默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
自定义实例默认值
// 创建实例时设置配置默认值
const instance = axios.create({
baseURL: 'https://api.example.com'
});
// 创建实例后更改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
合并配置顺序
对于每个请求,所有配置将被合并,顺序为:lib/defaults.js、全局或自定义实例默认值、请求时的config。
拦截器
可以拦截请求或响应,再请求发出之前和响应之前进行处理。
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response;
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error);
});
可以存储use函数返回值,以便可以删除拦截器:
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
取消请求
使用HTTP代理
存在NDS污染问题。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},