---

前言

书接上文，目标对Axios的更多功能和特性熟练与提高。

---

一、创建自定义配置的实例

axios可以创建自定义配置的实例，可以试试这种方式，为以后封装工具类做准备

axios.create([config])
const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});可用的实例方法：
Instance methodsaxios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#getUri([config])

二、掌握返回的结果结构

只有详细的知道返回结果才能在实战中处理各种情况。

{// `data` is the response that was provided by the serverdata: {},// `status` is the HTTP status code from the server responsestatus: 200,// `statusText` is the HTTP status message from the server response// As of HTTP/2 status text is blank or unsupported.// (HTTP/2 RFC: https://www.rfc-editor.org/rfc/rfc7540#section-8.1.2.4)statusText: 'OK',// `headers` the HTTP headers that the server responded with// All header names are lower cased and can be accessed using the bracket notation.// Example: `response.headers['content-type']`headers: {},// `config` is the config that was provided to `axios` for the requestconfig: {},// `request` is the request that generated this response// It is the last ClientRequest instance in node.js (in redirects)// and an XMLHttpRequest instance in the browserrequest: {}
}例：
axios.get('/user/12345').then(function (response) {console.log(response.data);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);});

---

三、拦截器相关用法

// Add a request interceptor
axios.interceptors.request.use(function (config) {// Do something before request is sentreturn config;}, function (error) {// Do something with request errorreturn 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 datareturn response;}, function (error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// Do something with response errorreturn Promise.reject(error);});//移除拦截器：const myInterceptor = axios.interceptors.request.use(function () {/*...*/});axios.interceptors.request.eject(myInterceptor);//自定义实例增加拦截器：const instance = axios.create();instance.interceptors.request.use(function () {/*...*/});

四、异常处理相关

axios.get('/user/12345').catch(function (error) {if (error.response) {// The request was made and the server responded with a status code// that falls out of the range of 2xxconsole.log(error.response.data);console.log(error.response.status);console.log(error.response.headers);} else if (error.request) {// The request was made but no response was received// `error.request` is an instance of XMLHttpRequest in the browser and an instance of// http.ClientRequest in node.jsconsole.log(error.request);} else {// Something happened in setting up the request that triggered an Errorconsole.log('Error', error.message);}console.log(error.config);});
Using the validateStatus config option, you can define HTTP code(s) that should throw an error.axios.get('/user/12345', {validateStatus: function (status) {return status < 500; // Resolve only if the status code is less than 500}
})
Using toJSON you get an object with more information about the HTTP error.axios.get('/user/12345').catch(function (error) {console.log(error.toJSON());});

五、取消请求的方式

经典的防止多次请求功能:

//CancelToken （过期不推荐）
You can create a cancel token using the CancelToken.source factory as shown below:const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/user/12345', {cancelToken: source.token
}).catch(function (thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// handle error}
});axios.post('/user/12345', {name: 'new name'
}, {cancelToken: source.token
})// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
You can also create a cancel token by passing an executor function to the CancelToken constructor:const CancelToken = axios.CancelToken;
let cancel;axios.get('/user/12345', {cancelToken: new CancelToken(function executor(c) {// An executor function receives a cancel function as a parametercancel = c;})
});// cancel the request
cancel();//signal: AbortController（推荐signal方式）Starting from v0.22.0 Axios supports AbortController to cancel requests in fetch API way:const controller = new AbortController();axios.get('/foo/bar', {signal: controller.signal
}).then(function(response) {//...
});
// cancel the request
controller.abort()
Example with a timeout using latest AbortSignal.timeout() API [nodejs 17.3+]:axios.get('/foo/bar', {signal: AbortSignal.timeout(5000) //Aborts request after 5 seconds
}).then(function(response) {//...
});
Example with a timeout helper function:function newAbortSignal(timeoutMs) {const abortController = new AbortController();setTimeout(() => abortController.abort(), timeoutMs || 0);return abortController.signal;
}axios.get('/foo/bar', {signal: newAbortSignal(5000) //Aborts request after 5 seconds
}).then(function(response) {//...
});//两种方式一起：
const controller = new AbortController();const CancelToken = axios.CancelToken;
const source = CancelToken.source();axios.get('/user/12345', {cancelToken: source.token,signal: controller.signal
}).catch(function (thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// handle error}
});axios.post('/user/12345', {name: 'new name'
}, {cancelToken: source.token
})// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
// OR
controller.abort(); // the message parameter is not supported

总结

axios的常用方法笔记记录完毕，一定要拿到环境中去运行尝试,多看看注释，都是实战总结的小提示，省时省力。本文学习的内容都是为了后续实战打下坚实基础，后续会自己封装一个实用的工具类。