用易语言做网站抢购软件,做电商从哪里入手,58网站怎么做才有客户问,凡科删除建设的网站文章目录 前言一、创建自定义配置的实例二、掌握返回的结果结构三、拦截器相关用法四、异常处理相关五、取消请求的方式总结 前言
书接上文#xff0c;目标对Axios的更多功能和特性熟练与提高。 一、创建自定义配置的实例
axios可以创建自定义配置的实例#xff0c;可以试试… 文章目录 前言一、创建自定义配置的实例二、掌握返回的结果结构三、拦截器相关用法四、异常处理相关五、取消请求的方式总结 前言
书接上文目标对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的常用方法笔记记录完毕一定要拿到环境中去运行尝试,多看看注释都是实战总结的小提示省时省力。本文学习的内容都是为了后续实战打下坚实基础后续会自己封装一个实用的工具类。
