1.axios是什么axios是一个轻量的HTTP客户端基于XMLHttpRequest 服务来执行HTTP请求支持丰富的配置支持Promise支持浏览器端和Node.js端。自Vue2.0起尤大宣布取消对vue-resource的官方推荐转而推荐axios。现在axios已经成为大部分Vue开发者的首选。2.特性从浏览器中创建 XMLHttpRequests从node.js创建http请求支持PromiseAPI拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据客户端支持防御XSRF3.基本使用安装npm install axios --Sscript srchttps://unpkg.com/axios/dist/axios.min.jsscript导入import axios from axios发送请求axios({ url: xxx, // 设置请求的地址 method: GET // 设置请求方式 params: { type: , page: 1, } }).then(res { // res 为后端返回的数据 console.log(res) })并发请求axios.all([])function getUserAccount() { return axios.get(/user/12345) } function getUserPermissions() { return axios.get(/user/12345/permissions) } axios.all([getUserAccount(),getUserPermissions()]) .then(axios.spread(function(res1,res2)){ // res1第一个请求的返回的内容res2第二个请求返回的内容 // 两个请求都执行完成才会执行 }))4.为什么要封装axios 的API很友好你完全可以很轻松地在项目中直接使用不过随着项目规模增大如果每发起一次HTTP请求就要把这些比如设置超时时间、请求头、根据项目环境判断使用哪个请求地址错误处理等等操作都需要写一遍这种重复劳动不仅浪费时间而且让代码变得荣誉不堪难以维护。为了提高我们的代码质量我们应该在项目中二次封装一下axios再使用举个例子axios(http://localhost:3000/data,{ // 配置代码 method: GET, timeout: 1000, withCredentials: true, headers: { Content-Type: application/json, Authorization: xxx, }, transformRuquest: [function(data,headers) { return data; }], // 其他请求配置... }) .then((data) { // todo: 真正业务逻辑代码 console.log(data); },(err) { // 错误处理代码 if(err.response.status 401) { // handle authorization error } if(err.response.status 403) { // handle serve forbidden error } // 其他错误处理... console.log(err) })如果每个页面都发送类似的请求都要写一堆的配置与错误处理就显得过于繁琐了这时候我们就需要对axios进行二次封装然使用更为便利5.如何封装封装的同时你需要和后端协商好一些约定请求头状态码请求超时时间......设置接口请求前缀根据开发、测试、生产环境的不同前缀需要加以区分请求头来实现一些具体的业务必须携带一些参数才可以请求状态码根据接口返回的不同status,来执行不同的业务这块需要和后端约定好请求方法根据get、post等方法金总一个再次封装使用起来更为方便请求拦截器 根据请求的请求头设定来决定哪些请求可以访问响应拦截器这块就是根据后端返回来的状态码判定执行不同业务1.设置接口请求前缀利用node环境变量来做判断用来区分开发、测试、生产环境if(process.env.NODE_ENV development) { axios.defaults.baseURL http://dev.xxx.com } esle if(process.env.NODE_ENV production) { axios.defaults.baseURL http://prod.xxx.com }在本地调试的时候还需要在vue.config.js文件中配置devServe实现代理转发从而实现跨域devServe: { proxy: { /proxyApi: { target: http://dev.xxx.com, changeOrigin:true, pathRewrite: { /proxyApi: } } } }2.设置请求头与超时时间大部分情况下请求头都是固定的只有少部分情况下会需要一些特殊的请求头这里将普适性的请求头作为基础配置。当需要特殊请求头时将特殊请求头作为参数传入覆盖基础配置const service axios.create({ ... timeout:30000, // 请求30s超时 headers: { get: { Content-Type: application/x-www-form-urlencoded;charsetutf-8 // 在开发中一般还需要单点登录或者其他功能的通用请求头可以一并配置进来 }, post: { Content-Type: application/json;charsetutf-8 // 在开发中般还需要单点登录或者其他功能的通用请求头可以一并配置进来 }, })3.封装请求方法先引入封装好的方法在要调用的接口重新封装成一个方法暴露出去// get 请求 export function httpGet({ url, params {} }){ return new Promise((resolve,reject) { axios.get(url, { params }).then(res) { resolve(res.data) }).catch(ree { reject(err) }) }) } // post 请求 export function httpPost({ url, data {} params {} }){ return new Promise((resolve,reject) { axios({ url, method: post, transformRequest: [function(data) { let ret for(let it in data){ ret encodeURIComponent(it) encodeURIComponent(data[it]) } return ret }], // 发送的数据 data, // url参数 params }).then(res) { resolve(res.data) }).catch(ree { reject(err) }) }) }把封装的方法放在一个api.js文件中import { httpGet,httpPost } from ./http export const getorglist (params {}) httpGet({url: apps/api/org/list,params})页面中就能直接调用import { getorglist } from /assets/js/api getorglist({id:200}).then(res { console.log(res) })这样可以把api统一管理起来以后维护修改只需要在api.js文件操作即可4.请求拦截器请求拦截器可以在每个请求里加上token做了统一处理后维护起来也方便// 请求拦截器 axios.interceptors.request.use( config { // 每次发送请求之前判断是否存在token // 如果存在则统一在http请求的header都加上token,这样后台根据token判断你的登录情况 此处token一般是用户完成登录后存储到localstorage里的 token (config.headers.Authorization token) return config }, error { return Promise.error(error) })5.响应拦截器响应拦截器可以在接收到响应后先做一层操作如根据状态码判断登录状态、授权// 响应拦截器 axios.interceptors.response.use(response { // 如果返回的状态码为200说明接口请求成功可以正常拿到数据 // 否则的话抛出错误 if(response.status 200) { if(response.data.code 511) { // 未授权调取授权接口 }else if(response.data.code 510) { // 未登录跳转登录页 }else { return Promise.resolve(response) } },error { //我们可以在这里对异常状态作统一处理 if(error.response.status) { // 处理请求失败的情况 // 对不同返回码做相应处理 return Promise.reject(error.response) } })
