axios-日常使用篇

强烈建议使用具体命方法发送请求 发送get axios.get('/user?ID=12345') 或着 axios.get('/user', { params: { ID: 12345 } }) axios#get(url[, config])（查）,delete（删）与其形式一样 发送post axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) axios#post(url[, data[, config]])（改） ,put(增) 与其形式一样 相比于 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); 不仅代码简洁，可读性野好。 根据 Content-Type 的类型,data可以不是普通对象 application/json 默认 image.png application/x-www-form-urlencoded 普通表单提交 axios.post("/test/test/test2", qs.stringify({ bar: 123 })); multipart/form-data 可以用于上传文件 const params = new FormData(); params.append("param1", "value1"); params.append("param2", "value2"); axios.post("/test/test/test2", params); image.png 四种常见的 POST 提交数据方式 可以不指定，axios会自动判断 其实axios是Promise 的一种实现 console.log(axios.post("/test/test/test1")); image.png 解决多个请求 axios .all([ new Promise((resolve, reject) => { resolve("success1"); }), new Promise((resolve, reject) => { setTimeout(() => { resolve("success2"); }, 2000); }), ]) .then( axios.spread((res1, res2) => { console.log(res1, res2); }), ); axios.all 请求都成功才算成功，有一个失败则失败，要和axios.spread 搭配使用 您有没有好奇，为啥没有Promise 的 race 方法 其实上述代码可以替换为： Promise.all([ axios.post("/test/test/test2"), axios.post("/test/test/test1"), ]).then((r1, r2) => { console.log("res", r1, r2); }); 同理race 可写为: Promise.race([ axios.post("/test/test/test2"), axios.post("/test/test/test1"), ]).then((r1) => { console.log("res", r1); }); 请求可以被取消 一些搜索不取消上一次的请求，响应时间大于用户做出其他操作的时间，可能看到一些奇怪的行为 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.'); axios配置概要 axios被设计成可以在nodejs中使用，官网上有些配置是只适用于nodejs baseURL 公共前缀，用于生成最终的url responseType 定义响应的数据类型 默认json,可以是arraybuffer, document, json, text, stream onUploadProgress 得到上传进度 onUploadProgress: function (progressEvent) { }, onDownloadProgress 得到下载进度 onDownloadProgress: function (progressEvent) { } transformRequest 自己处理发送的数据 axios.post( "/test/test/test1", { content: "武汉加油!" }, { headers: { "content-type": "application/json" }, transformRequest: (data, headers) => { return JSON.stringify(data); } } content-type 大小写不敏感 data 属性 发送的数据，最终发送的都是字符串，只是格式以及对应的解析方式不同 当没定义transformRequest 只能是FormData, File, Blob,string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams headers 用于设置Request Headers，默认值{'X-Requested-With': 'XMLHttpRequest'} x-requested-with 为 null，则为传统同步请求，为 XMLHttpRequest，则为 Ajax 异步请求。 x-requested-with的作用以及用法详解 timeout 相应超时时间，默认是0，不限制 withCredentials 默认false,跨域请求时是否携带Cookie，请求图片时不携带增加成功率，而登录时不携带则无法成功 validateStatus 返回状态码是多少时表示成功 validateStatus: function (status) { return status >= 200 && status < 300; // default }, paramsSerializer 自定义序列化参数的方式 axios.get( "/test/test/test1", { params: { content: "武汉加油!" }, paramsSerializer: function(params) { return qs.stringify(params, { arrayFormat: "brackets" }); } } adapter 用于模拟响应 axios .post( "/test/test/test1", { content: "武汉加油" }, { adapter: function(config) { return new Promise((res, rej) => { const resInfo = { data: { content: "必需的" }, status: 200, statusText: "OK" }; // 调用响应函数 res(resInfo); }); } } ) .then(res => { console.log(res); }); 这时便不会发送请求 config 是这个样子的 image.png auth Request Headers中会多出Authorization axios .post( "/test/test/test1", { content: "武汉加油" }, {} ) 修改配置 config 里面的属性都可以通过axios.defaults方式修改 axios.defaults.baseURL = 'https://api.example.com'; 所有请求的Authorization默认值 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; 只对应post请求 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 只有headers支持common和指定类型的设置 可以通过创建实例的方式指定配置 const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); 可以配置拦截器 请求时拦截 axios.interceptors.request.use(function (config) { // 请求发送前 return config; }, function (error) { //发送时出现了错误 return Promise.reject(error); }); 在响应时拦截 axios.interceptors.response.use(function (response) { //正常响应 return response; }, function (error) { //错误响应 return Promise.reject(error); }); 温馨提示，当代码逻辑与预期不符时，可以按照当前请求=>实例=>默认配置进行排查，以及排查拦截器的逻辑 下列拦截器逻辑可导致axios.all有请求失败也会走then方法， axios.interceptors.response.use( function(response) { return response; }, (error, response) => { if (error.response && error.response.status === 504) { } else { console.error(error); } }

本文章由javascript技术分享原创和收集