axios
是目前流行的Promise网络请求库,在浏览器端他通过 xhr
方式创建ajax请求。在node环境下,通过 http
库创建网络请求。
axios
提供了丰富的配置,这里讲一讲我在工作中通常用到的基本配置方法。
因为我在工作中用 vue
进行开发,所以以下代码默认的环境是 vue-cli
。
为什么要创建一个 axios
实例,而不是在 axios
对象上进行配置呢?是因为我们会应对复杂的使用场景,多个实例便于管理。
const isDev = process.env.NODE_ENV === 'development'; const instance = axios.create({ // baseURL是在proxyTable中会转发的配置,通过环境变量的判断,可以在开发和生产环境使用不同的url进行请求 baseURL: isDev ? '/fakeapi' : '/api', timeout: 5000, validateStatus(status) { // 一般来说,http status为200-300之间时,均判定为请求通过,你可以在这里修改这个配置(不建议修改) return status === 200 }, headers: { // 定义 post 请求编码格式 post: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' } } });
虽然对请求设置了编码格式,但是还是需要进一步设置具体的编码格式,比如我想进行一些特殊的设置。
qs.stringify
这里的参数请参考这篇文章
import Qs from 'qs'; instance.interceptors.request.use(config => { // 也可以在这里给请求添加token之类的字段 config.data = Qs.stringify(config.data, {arrayFormat: 'repeat', allowDots: true}); return config; }, err => { return Promise.reject(err); });
import httpErrorHandler from './httpErrorHandler.js'; instance.interceptors.response.use(function(data) { // 这里可以对返回数据进行处理,比如验证code是否为1等 return data.data; }, httpErrorHandler)
httpErrorHandler.js
代码
# httpErrorHandler.js export default (error) => { if (!error.response) { return Promise.reject({ msg: '网络连接超时', error }); }; let msg = ''; const status = error.response.status; switch (status) { case 400: msg = '错误的请求参数'; break; case 401: msg = '没有该操作权限'; break; case 403: msg = '请登录'; break; case 404: msg = '错误的请求地址'; break; case 500: case 501: case 502: case 503: case 504: msg = '服务器错误'; break; default: msg = '未知错误' + status; } return Promise.reject({ msg, error }); }
和 jquery.ajax
不同,axios
的get方式需要通过 prarms
而不是 data
参数传递:
/** * 封装后的axios get方法 * * @param {string} url 请求路径 * @param {object} option 请求参数 * @param {object} [config] 特殊配置项(选填) * @returns */ export function get(url, option, config = {}) { return instance.get(url, { params: option }, config) } // 调用get get('http://baidu.com', { a: 1, b: 2 }) .then(...) .catch(...)
post请求方式则要简单一些,不需要使用 prarms
参数
/** * 封装后的axios post方法 * * @param {string} url 请求路径 * @param {object} option 请求参数 * @param {object} [config] 特殊配置项(选填) * @returns */ export function get(url, option, config = {}) { return instance.get(url, option, config) } // 调用post post('http://baidu.com', { a: 1, b: 2 }) .then(...) .catch(...)
上传文件需要使用不同的header设置和编码方式,所以需要创建一个单独的实例
const uploadInstance = axios.create({ baseURL: isDev ? '/fakeapi' : '/api', timeout: 15000, headers: { // 发送文件需要的编码格式 'Content-Type': 'multipart/form-data' } }); /** * 封装后的axios upload方法 * * @param {string} url 请求路径 * @param {object} option 请求参数 * @param {object} [config] 特殊配置项(选填) * @returns */ export function get(url, option, config = {}) { let formdata = new FormData(); Object.keys(option).forEach(key=>{ formdata.append(key, option[key]) }) return uploadInstance.post(url, formdata, config) } # 使用上传 let data = { a: 1, image: input.files[0], } let config = { onUploadProgress(progressEvent) { // 展示上传进度等 } } upload('http://baidu.com', data, config)
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论