2022年10月25日

封装原理

前端异步请求封装 - 图1

uniapp 封装

方式一，全功能，结合Promise，自定义拦截器

  1. // 默认方式
  2. uni.request({
  3.     url: "https://www.example.com/request",
  4.     success: (res) => {
  5.         console.log(res.data);
  6.     },
  7.     fail: (err) => {
  8.         console.error(err);
  9.     },
  10. });
  12. // 使用 Promise then/catch 方式调用
  13. uni
  14.     .request({
  15.         url: "https://www.example.com/request",
  16.     })
  17.     .then((res) => {
  18.         // 此处的 res 参数，与使用默认方式调用时 success 回调中的 res 参数一致
  19.         console.log(res.data);
  20.     })
  21.     .catch((err) => {
  22.         // 此处的 err 参数，与使用默认方式调用时 fail 回调中的 err 参数一致
  23.         console.error(err);
  24.     });
  26. // 使用 Async/Await 方式调用
  27. async function request() {
  28.     try {
  29.         var res = await uni.request({
  30.             url: "https://www.example.com/request",
  31.         });
  32.         // 此处的 res 参数，与使用默认方式调用时 success 回调中的 res 参数一致
  33.         console.log(res);
  34.     } catch (err) {
  35.         // 此处的 err 参数，与使用默认方式调用时 fail 回调中的 err 参数一致
  36.         console.error(err);
  37.     }
  38. }
  1. // 可以从外部引入baseURL,也可以定义到config下的baseURL中
  2. import baseURL from '@/common/baseURL.js'
  3. export default {
  4.     config: {
  5.         baseURL: baseURL,
  6.         // 处理token的方法
  7.         getToken() {
  8.             let token = uni.getStorageSync('token');
  9.             if (!token) {
  10.                 return uni.reLaunch({
  11.                     url: '/pages/login/login'
  12.                 })
  13.             }
  14.             return token
  15.         },
  16.         // 请求拦截器
  17.         beforeRequest(options = {}) {
  18.             return new Promise((resolve, reject) => {
  19.                 options.url = this.baseURL + options.url;
  20.                 options.method = options.method || 'GET';
  21.                 // 封装自己的请求头
  22.                 options.header = {
  23.                     token: this.getToken()
  24.                 }
  25.                 resolve(options)
  26.             })
  27.         },
  28.         // 响应拦截器
  29.         beforeResponse(data) {
  30.             return new Promise((resolve, reject) => {
  31.                 const [err, res] = data;
  32.                 // 处理错误
  33.                 if (res && res.statusCode !== 200) {
  34.                     let msg = res.data.msg || '请求错误';
  35.                     uni.showToast({
  36.                         icon: 'none',
  37.                         title: msg
  38.                     })
  39.                     return reject(msg);
  40.                 }
  41.                 if (err) {
  42.                     uni.showToast({
  43.                         icon: 'none',
  44.                         title: '请求错误'
  45.                     })
  46.                     return reject(err);
  47.                 }
  48.                 return resolve(res.data)
  49.             })
  50.         }
  51.     },
  52.     // request 请求
  53.     request(options = {}) {
  54.         return this.config.beforeRequest(options) // 1、请求拦截器
  55.             .then((opt) => {
  56.                 return uni.request(opt) // 2、发送请求
  57.             })
  58.             .then((res) => this.config.beforeResponse(res)) // 3、响应拦截器
  59.     }
  60. }

方式二，uniapp 默认拦截器

  1. uni.request({
  2.     url: 'request/login', //仅为示例，并非真实接口地址。
  3.     success: (res) => {
  4.         console.log(res.data);
  5.         // 打印： {code:1,...}
  6.     }
  7. });
  9. // 拦截 request 请求
  10. uni.addInterceptor('request', {
  11.   invoke(args) {
  12.     // request 触发前拼接 url 
  13.     args.url = 'https://www.example.com/'+args.url
  14.   },
  15.   success(args) {
  16.     // 请求成功后，修改code值为1
  17.     args.data.code = 1
  18.   }, 
  19.   fail(err) {
  20.     // 失败回调拦截
  21.     console.log('interceptor-fail',err)
  22.   }, 
  23.   complete(res) {
  24.     // 完成回调拦截
  25.     console.log('interceptor-complete',res)
  26.   }
  27. })

方式三，包装为一个函数

  1. async function ajax(method, datalist, param, header, successFunc, errFunc, isLoading) {
  2.     let url = LinkUrl + datalist;
  3.     var _this = this;
  4.     if (isLoading === true) {
  5.         loading();
  6.     }
  7.     var datalist = datalist;
  8.     var myDate = new Date();
  9.     var requestTime = myDate.getFullYear() + '-' + (myDate.getMonth() + 1) + '-' + myDate.getDate() + ' ' + myDate
  10.         .getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds();
  11.     var strval = '+6Hp9X5zR39SOI6oP0685Bk77gG56m7PkV89xYvl86A=' + datalist + requestTime
  12.     var customerKey = md5.hexMD5(strval)
  13.     try {
  14.         var value = uni.getStorageSync('key')
  15.         if (value) {
  16.             data['token'] = value.token;
  17.             var headeritem = value.token;
  18.         }
  19.     } catch (e) {
  20.         console.log(e)
  21.     }
  22.     param.site_id = uni.getStorageSync('site_id') ? uni.getStorageSync('site_id') : '0';
  23.     //#ifdef H5
  24.     param.be_from = 'H5';
  25.     //#endif
  26.     //#ifdef MP-WEIXIN
  27.     param.be_from = 'program';
  28.     //#endif
  29.     param.customerID = '8001';
  30.     param.customerKey = customerKey;
  31.     param.requestTime = requestTime;
  32.     param.Method = datalist;
  33.     var _errFunc = function(_msg) {
  34.         hideLoading();
  35.         if (isLoading === true) {
  36.             hideLoading();
  37.         }
  38.         if (!!errFunc) {
  39.             errFunc(_msg || '操作失败，请稍后重试');
  40.         }
  41.     }
  42.     var header;
  43.     if (method == 'POST') {
  44.         header = {
  45.             'content-type': 'application/x-www-form-urlencoded',
  46.             'token': headeritem
  47.         }
  48.     } else {
  49.         header = {
  50.             'content-type': 'multipart/form-data',
  51.             token: headeritem
  52.         };
  53.     }
  54.     uni.request({
  55.         url: url,
  56.         data: param,
  57.         method: method,
  58.         header: header,
  59.         success(res) {
  60.             if (res.data.code == 401) {
  61.                 //#ifdef H5
  62.                 window.location.href = res.data.data;
  63.                 //#endif
  64.             }
  65.             if (res.data) {
  66.                 if (isLoading === true) {
  67.                     uni.hideLoading();
  68.                 }
  69.                 successFunc(res.data);
  70.             }
  71.         },
  72.         fail(res) {
  73.             console.log(res)
  74.             _errFunc();
  75.         }
  76.     })
  77. }

axios 封装

  1. // 请求超时时间
  2. axios.defaults.timeout = 120000
  4. // 添加请求拦截器
  5. // 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，
  6. // 统一做了处理如果以后要改也非常容易。
  7. axios.interceptors.request.use(
  8.     config => {
  9.         // 在发送请求之前做些什么
  10.         // 判断是否存在token，如果存在将每个页面header都添加token
  11.         if (window.sessionStorage.getItem('DT')) {
  12.             // 请求头配置全局token
  13.             config.headers.DT = window.sessionStorage.getItem('DT')
  14.         }
  15.         return config
  16.     },
  17.     err => {
  18.         // 对请求错误做些什么
  19.         Vue.prototype.$message.error('请求超时')
  20.         return Promise.reject(err)
  21.     }
  22. )
  1. // 响应拦截器
  2. axios.interceptors.response.use(
  3.     response => {
  4.         // res是响应的结果
  5.         switch (response.data.code) {
  6.             case 401:
  7.                 // 登录失效
  8.                 // 响应成功的拦截
  9.                 console.log('响应拦截器：')
  10.                 // console.log(response.data)
  11.                 Vue.prototype.$message.error(response.data.message)
  12.                 sessionStorage.removeItem('DT')
  13.                 router.push('/login')
  14.                 break
  15.             case 404:
  16.                 if (response.data.message !== null) {
  17.                     Vue.prototype.$message.error(response.data.message)
  18.                 } else {
  19.                     Vue.prototype.$message.error('未知错误')
  20.                 }
  21.                 break
  22.             case 500:
  23.                 // 错误
  24.                 if (response.data.message !== null) {
  25.                     Vue.prototype.$message.error(response.data.message)
  26.                 } else {
  27.                     Vue.prototype.$message.error('未知错误')
  28.                 }
  29.                 break
  30.             default:
  31.                 return response
  32.         }
  33.         return response
  34.     },
  35.     err => {
  36.         if (err.response.data.message) {
  37.             Vue.prototype.$message.error(err.response.data.message)
  38.             return Promise.reject(err.response.data.message) // 返回接口返回的错误信息
  39.         } else {
  40.             // 返回状态码不为200时候的错误处理
  41.             Vue.prototype.$message.error(err.toString())
  42.             return Promise.resolve(err)
  43.         }
  44.     }
  45. )
  1. // 用户登录提交
  2. login() {
  3.     // debugger
  4.     this.$refs.loginFormRef.validate(async valid => {
  5.         if (!valid) {
  6.             return
  7.         }
  8.         if (valid) {
  9.             const userInfo = {
  10.                 username: this.loginForm.username,
  11.                 password: this.loginForm.password
  12.             }
  13.             // 登录之前去除token
  14.             window.sessionStorage.removeItem('DT')
  15.             const {
  16.                 data: res
  17.             } = await this.$http.post('/system/login', userInfo)
  18.             if (res.code !== 200) {
  19.                 this.initCaptcha()
  20.                 return
  21.             }
  22.             this.$message.success('登录成功')
  23.             window.sessionStorage.setItem('DT', res.result.token)
  24.             this.$router.push('/main')
  25.         }
  26.     })
  27. }

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库， 可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、 客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。
1、安装axios

  1. npm install axios; // 安装axios

2、一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js 和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

  1. // http.js
  3. import axios from 'axios'; // 引入axios
  4. import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，后面会提到
  5. // vant的toast提示框组件，大家可根据自己的ui组件更改。
  6. import { Toast } from 'vant'; 
  8. // 环境的切换
  9. // 我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的
  10. // 默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。
  12. if (process.env.NODE_ENV == 'development') {    
  13.     axios.defaults.baseURL = 'https://www.baidu.com';} 
  14. else if (process.env.NODE_ENV == 'debug') {    
  15.     axios.defaults.baseURL = 'https://www.ceshi.com';
  16. } 
  17. else if (process.env.NODE_ENV == 'production') {    
  18.     axios.defaults.baseURL = 'https://www.production.com';
  19. }
  21. // 设置请求超时通过axios.defaults.timeout设置默认的请求超时时间。
  22. // 例如超过了10s，就会告知用户当前请求超时，请刷新等。
  24. axios.defaults.timeout = 10000;
  26. // post请求头的设置post请求的时候，我们需要加上一个请求头，
  27. // 所以可以在这里进行一个默认的设置，
  28. // 即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8
  30. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
  32. // 请求拦截
  33. // 我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？
  34. // 比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。
  35. // 这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。
  37. // 先导入vuex,因为我们要使用到里面的状态对象
  38. // vuex的路径根据自己的路径去写
  39. import store from '@/store/index';
  41. // 请求拦截器
  42. axios.interceptors.request.use(    
  43.     config => {        
  44.         // 每次发送请求之前判断vuex中是否存在token        
  45.         // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
  46.         // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
  47.         const token = store.state.token;        
  48.         token && (config.headers.Authorization = token);        
  49.         return config;    
  50.     },    
  51.     error => {        
  52.         return Promise.error(error);    
  53. })
  55. // 这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，
  56. // 然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，
  57. // 如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，
  58. // 都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，
  59. // 如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，
  60. // 那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，
  61. // 但是后台可以选择不接收啊！
  64. // 响应拦截器
  65. axios.interceptors.response.use(    
  66.     response => {   
  67.         // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据     
  68.         // 否则的话抛出错误
  69.         if (response.status === 200) {            
  70.             return Promise.resolve(response);        
  71.         } else {            
  72.             return Promise.reject(response);        
  73.         }    
  74.     },    
  75.     // 服务器状态码不是2开头的的情况
  76.     // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
  77.     // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  78.     // 下面列举几个常见的操作，其他需求可自行扩展
  79.     error => {            
  80.         if (error.response.status) {            
  81.             switch (error.response.status) {                
  82.                 // 401: 未登录
  83.                 // 未登录则跳转登录页面，并携带当前页面的路径
  84.                 // 在登录成功后返回当前页面，这一步需要在登录页操作。                
  85.                 case 401:                    
  86.                     router.replace({                        
  87.                         path: '/login',                        
  88.                         query: { 
  89.                             redirect: router.currentRoute.fullPath 
  90.                         }
  91.                     });
  92.                     break;
  94.                 // 403 token过期
  95.                 // 登录过期对用户进行提示
  96.                 // 清除本地token和清空vuex中token对象
  97.                 // 跳转登录页面                
  98.                 case 403:
  99.                      Toast({
  100.                         message: '登录过期，请重新登录',
  101.                         duration: 1000,
  102.                         forbidClick: true
  103.                     });
  104.                     // 清除token
  105.                     localStorage.removeItem('token');
  106.                     store.commit('loginSuccess', null);
  107.                     // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转
  108.                                 // 需要访问的页面 
  109.                     setTimeout(() => {                        
  110.                         router.replace({                            
  111.                             path: '/login',                            
  112.                             query: { 
  113.                                 redirect: router.currentRoute.fullPath 
  114.                             }                        
  115.                         });                    
  116.                     }, 1000);                    
  117.                     break; 
  119.                 // 404请求不存在
  120.                 case 404:
  121.                     Toast({
  122.                         message: '网络请求不存在',
  123.                         duration: 1500,
  124.                         forbidClick: true
  125.                     });
  126.                     break;
  127.                 // 其他错误，直接抛出错误提示
  128.                 default:
  129.                     Toast({
  130.                         message: error.response.data.message,
  131.                         duration: 1500,
  132.                         forbidClick: true
  133.                     });
  134.             }
  135.             return Promise.reject(error.response);
  136.         }
  137.     }    
  138. });
  139. // 响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。
  140. // 例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码
  141. // 类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后
  142. // 调整登录页的一个操作。
  145. // 要注意的是，上面的Toast()方法，是我引入的vant库中的toast轻提示组件，你根据你的ui库，
  146. // 对应使用你的一个提示组件。
  149. // 封装get方法和post方法
  150. // 我们常用的ajax请求方法有get、post、put等方法，相信小伙伴都不会陌生。axios对应的也有很多
  151. // 类似的方法，不清楚的可以看下文档。但是为了简化我们的代码，我们还是要对其进行一个简单的封装。
  152. // 下面我们主要封装两个方法：get和post。
  154. // get方法：我们通过定义一个get函数，get函数有两个参数，第一个参数表示我们要请求的url地址，
  155. // 第二个参数是我们要携带的请求参数。get函数返回一个promise对象，当axios其请求成功时
  156. // resolve服务器返回 值，请求失败时reject错误值。最后通过export抛出get函数。
  158. /**
  159.  * get方法，对应get请求
  160.  * @param {String} url [请求的url地址]
  161.  * @param {Object} params [请求时携带的参数]
  162.  */
  163. export function get(url, params){    
  164.     return new Promise((resolve, reject) =>{        
  165.         axios.get(url, {            
  166.             params: params        
  167.         }).then(res => {
  168.             resolve(res.data);
  169.         }).catch(err =>{
  170.             reject(err.data)        
  171.       })    
  172.   });
  173. }
  176. // post方法：原理同get基本一样，但是要注意的是，post方法必须要使用对提交从参数对象进行
  177. // 序列化的操作，所以这里我们通过node的qs模块来序列化我们的参数。这个很重要，
  178. // 如果没有序列化操作，后台是拿不到你提交的数据的。这就是文章开头我们
  179. // import QS from 'qs';的原因。
  182. /** 
  183.  * post方法，对应post请求 
  184.  * @param {String} url [请求的url地址] 
  185.  * @param {Object} params [请求时携带的参数] 
  186.  */
  187. export function post(url, params) {
  188.     return new Promise((resolve, reject) => {
  189.          axios.post(url, QS.stringify(params))
  190.         .then(res => {
  191.             resolve(res.data);
  192.         })
  193.         .catch(err =>{
  194.             reject(err.data)
  195.         })
  196.     });
  197. }
  199. // 这里有个小细节说下，axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。
  200. // 区别就是，get的第二个参数是一个{}，然后这个对象的params属性值是一个参数对象的。
  201. // 而post的第二个参数就是一个参数对象。两者略微的区别要留意哦！
  203. // axios的封装基本就完成了，下面再简单说下api的统一管理。
  205. // --------------------------------
  211. // api.js
  213. // 整齐的api就像电路板一样，即使再复杂也能很清晰整个线路。上面说了，我们会新建一个api.js,
  214. // 然后在这个文件中存放我们所有的api接口。
  216. // 首先我们在api.js中引入我们封装的get和post方法
  218. /**   
  219.  * api接口统一管理
  220.  */
  221. import { get, post } from './http'
  223. // 现在，例如我们有这样一个接口，是一个post请求：
  224. // http://www.baiodu.com/api/v1/users/my_address/address_edit_before
  225. // 我们可以在api.js中这样封装：
  227. export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);
  228. // 我们定义了一个apiAddress方法，这个方法有一个参数p，p是我们请求接口时携带的参数对象。
  229. // 而后调用了我们封装的post方法，post方法的第一个参数是我们的接口地址，
  230. // 第二个参数是apiAddress的p参数，即请求接口时携带的参数对象。
  231. // 最后通过export导出apiAddress。
  238. // 然后在我们的页面中可以这样调用我们的api接口：
  240. import { apiAddress } from '@/request/api';// 导入我们的api接口
  241. export default {        
  242.     name: 'Address',    
  243.     created () {
  244.         this.onLoad();
  245.     },
  246.     methods: {            
  247.         // 获取数据            
  248.         onLoad() {
  249.             // 调用api接口，并且提供了两个参数                
  250.             apiAddress({                    
  251.                 type: 0,                    
  252.                 sort: 1                
  253.             }).then(res => {
  254.                 // 获取数据成功后的其他操作
  255.                 // ………………                
  256.             })            
  257.         }        
  258.     }
  259. }
  260. // 其他的api接口，就在pai.js中继续往下面扩展就可以了。友情提示，为每个接口写好注释哦！！！
  262. // api接口管理的一个好处就是，我们把api统一集中起来，如果后期需要修改接口，
  263. // 我们就直接在api.js中找到对应的修改就好了，而不用去每一个页面查找我们的接口
  264. // 然后再修改会很麻烦。关键是，万一修改的量比较大，就规格gg了。还有就是如果直接在
  265. // 我们的业务代码修改接口，一不小心还容易动到我们的业务代码造成不必要的麻烦。
  267. // 好了，最后把完成的axios封装代码奉上。
  274. /**axios封装
  275.  * 请求拦截、相应拦截、错误统一处理
  276.  */
  277. import axios from 'axios';import QS from 'qs';
  278. import { Toast } from 'vant';
  279. import store from '../store/index'
  281. // 环境的切换
  282. if (process.env.NODE_ENV == 'development') {    
  283.     axios.defaults.baseURL = '/api';
  284. } else if (process.env.NODE_ENV == 'debug') {    
  285.     axios.defaults.baseURL = '';
  286. } else if (process.env.NODE_ENV == 'production') {    
  287.     axios.defaults.baseURL = 'http://api.123dailu.com/';
  288. }
  290. // 请求超时时间
  291. axios.defaults.timeout = 10000;
  293. // post请求头
  294. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
  296. // 请求拦截器
  297. axios.interceptors.request.use(    
  298.     config => {
  299.         // 每次发送请求之前判断是否存在token，如果存在，
  300.               // 则统一在http请求的header都加上token，不用每次请求都手动添加了
  301.         // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
  302.         const token = store.state.token;        
  303.         token && (config.headers.Authorization = token);        
  304.         return config;    
  305.     },    
  306.     error => {        
  307.         return Promise.error(error);    
  308.     })
  310. // 响应拦截器
  311. axios.interceptors.response.use(    
  312.     response => {        
  313.         if (response.status === 200) {            
  314.             return Promise.resolve(response);        
  315.         } else {            
  316.             return Promise.reject(response);        
  317.         }    
  318.     },
  319.     // 服务器状态码不是200的情况    
  320.     error => {        
  321.         if (error.response.status) {            
  322.             switch (error.response.status) {                
  323.                 // 401: 未登录                
  324.                 // 未登录则跳转登录页面，并携带当前页面的路径                
  325.                 // 在登录成功后返回当前页面，这一步需要在登录页操作。                
  326.                 case 401:                    
  327.                     router.replace({                        
  328.                         path: '/login',                        
  329.                         query: { redirect: router.currentRoute.fullPath } 
  330.                     });
  331.                     break;
  332.                 // 403 token过期                
  333.                 // 登录过期对用户进行提示                
  334.                 // 清除本地token和清空vuex中token对象                
  335.                 // 跳转登录页面                
  336.                 case 403:                     
  337.                     Toast({                        
  338.                         message: '登录过期，请重新登录',                        
  339.                         duration: 1000,                        
  340.                         forbidClick: true                    
  341.                     });                    
  342.                     // 清除token                    
  343.                     localStorage.removeItem('token');                    
  344.                     store.commit('loginSuccess', null);                    
  345.                     // 跳转登录页面，并将要浏览的页面fullPath传过去，
  346.                 //登录成功后跳转需要访问的页面
  347.                     setTimeout(() => {                        
  348.                         router.replace({                            
  349.                             path: '/login',                            
  350.                             query: { 
  351.                                 redirect: router.currentRoute.fullPath 
  352.                             }                        
  353.                         });                    
  354.                     }, 1000);                    
  355.                     break; 
  356.                 // 404请求不存在                
  357.                 case 404:                    
  358.                     Toast({                        
  359.                         message: '网络请求不存在',                        
  360.                         duration: 1500,                        
  361.                         forbidClick: true                    
  362.                     });                    
  363.                 break;                
  364.                 // 其他错误，直接抛出错误提示                
  365.                 default:                    
  366.                     Toast({                        
  367.                         message: error.response.data.message,                        
  368.                         duration: 1500,                        
  369.                         forbidClick: true                    
  370.                     });            
  371.             }            
  372.             return Promise.reject(error.response);        
  373.         }       
  374.     }
  375. );
  376. /** 
  377.  * get方法，对应get请求 
  378.  * @param {String} url [请求的url地址] 
  379.  * @param {Object} params [请求时携带的参数] 
  380.  */
  381. export function get(url, params){    
  382.     return new Promise((resolve, reject) =>{        
  383.         axios.get(url, {            
  384.             params: params        
  385.         })        
  386.         .then(res => {            
  387.             resolve(res.data);        
  388.         })        
  389.         .catch(err => {            
  390.             reject(err.data)        
  391.         })    
  392.     });
  393. }
  394. /** 
  395.  * post方法，对应post请求 
  396.  * @param {String} url [请求的url地址] 
  397.  * @param {Object} params [请求时携带的参数] 
  398.  */
  399. export function post(url, params) {    
  400.     return new Promise((resolve, reject) => {         
  401.         axios.post(url, QS.stringify(params))        
  402.         .then(res => {            
  403.             resolve(res.data);        
  404.         })        
  405.         .catch(err => {            
  406.             reject(err.data)        
  407.         })    
  408.     });
  409. }
  414. // **********************************
  424. // axios的封装根据需求的不同而不同。
  425. // 1.优化axios封装，去掉之前的get和post
  426. // 2.断网情况处理
  427. // 3.更加模块化的api管理
  428. // 4.接口域名有多个的情况
  429. // 5.api挂载到vue.prototype上省去引入的步骤
  430. // http.js中axios封装的优化，先直接贴代码：
  433. /**
  434.  * axios封装
  435.  * 请求拦截、响应拦截、错误统一处理
  436.  */
  437. import axios from 'axios';
  438. import router from '../router';
  439. import store from '../store/index';
  440. import { Toast } from 'vant';
  442. /** 
  443.  * 提示函数 
  444.  * 禁止点击蒙层、显示一秒后关闭
  445.  */
  446. const tip = msg => {    
  447.     Toast({        
  448.         message: msg,        
  449.         duration: 1000,        
  450.         forbidClick: true    
  451.     });
  452. }
  454. /** 
  455.  * 跳转登录页
  456.  * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
  457.  */
  458. const toLogin = () => {
  459.     router.replace({
  460.         path: '/login',        
  461.         query: {
  462.             redirect: router.currentRoute.fullPath
  463.         }
  464.     });
  465. }
  467. /** 
  468.  * 请求失败后的错误统一处理 
  469.  * @param {Number} status 请求失败的状态码
  470.  */
  471. const errorHandle = (status, other) => {
  472.     // 状态码判断
  473.     switch (status) {
  474.         // 401: 未登录状态，跳转登录页
  475.         case 401:
  476.             toLogin();
  477.             break;
  478.         // 403 token过期
  479.         // 清除token并跳转登录页
  480.         case 403:
  481.             tip('登录过期，请重新登录');
  482.             localStorage.removeItem('token');
  483.             store.commit('loginSuccess', null);
  484.             setTimeout(() => {
  485.                 toLogin();
  486.             }, 1000);
  487.             break;
  488.         // 404请求不存在
  489.         case 404:
  490.             tip('请求的资源不存在'); 
  491.             break;
  492.         default:
  493.             console.log(other);   
  494.         }
  495. }
  497. // 创建axios实例
  498. var instance = axios.create({    timeout: 1000 * 12});
  499. // 设置post请求头
  500. instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  501. /** 
  502.  * 请求拦截器 
  503.  * 每次请求前，如果存在token则在请求头中携带token 
  504.  */ 
  505. instance.interceptors.request.use(    
  506.     config => {        
  507.         // 登录流程控制中，根据本地是否存在token判断用户的登录情况        
  508.         // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token        
  509.         // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码        
  510.         // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。        
  511.         const token = store.state.token;        
  512.         token && (config.headers.Authorization = token);        
  513.         return config;    
  514.     },    
  515.     error => Promise.error(error))
  517. // 响应拦截器
  518. instance.interceptors.response.use(    
  519.     // 请求成功
  520.     res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
  521.     // 请求失败
  522.     error => {
  523.         const { response } = error;
  524.         if (response) {
  525.             // 请求已发出，但是不在2xx的范围 
  526.             errorHandle(response.status, response.data.message);
  527.             return Promise.reject(response);
  528.         } else {
  529.             // 处理断网的情况
  530.             // eg:请求超时或断网时，更新state的network状态
  531.             // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
  532.             // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
  533.             if (!window.navigator.onLine) {
  534.                store.commit('changeNetwork', false);
  535.             } else {
  536.                 return Promise.reject(error);
  537.             }
  538.         }
  539.     });
  541. export default instance;
  544. // 这个axios和之前的大同小异，做了如下几点改变：
  546. 1.去掉了之前get和post方法的封装，通过创建一个axios实例然后export default方法导出，
  547.   这样使用起来更灵活一些。
  549. 2.去掉了通过环境变量控制baseUrl的值。考虑到接口会有多个不同域名的情况，所以准备通过js变量
  550.   来控制接口域名。这点具体在api里会介绍。
  552. 3.增加了请求超时，即断网状态的处理。说下思路，当断网时，通过更新vuex中network的状态来
  553.   控制断网提示组件的显示隐藏。断网提示一般会有重新加载数据的操作，这步会在后面对应的地方介绍。
  555. 4.公用函数进行抽出，简化代码，尽量保证单一职责原则。
  559. 下面说下api这块，考虑到一下需求：
  561. 1.更加模块化
  563. 2.更方便多人开发，有效减少解决命名冲突
  565. 3.处理接口域名有多个情况
  567. 这里这里呢新建了一个api文件夹，里面有一个index.js和一个base.js，以及多个根据模块
  568. 划分的接口js文件。index.js是一个api的出口，base.js管理接口域名，其他js则用来管理
  569. 各个模块的接口。
  571. // 先放index.js代码：
  573. /** 
  574.  * api接口的统一出口
  575.  */
  576. // 文章模块接口
  577. import article from '@/api/article';
  578. // 其他模块的接口……
  580. // 导出接口
  581. export default {    
  582.     article,
  583.     // ……
  584. }
  585. index.js是一个api接口的出口，这样就可以把api接口根据功能划分为多个模块，
  586. 利于多人协作开发，比如一个人只负责一个模块的开发等，还能方便每个模块中接口的命名哦。
  590. base.js:
  592. /**
  593.  * 接口域名的管理
  594.  */
  595. const base = {    
  596.     sq: 'https://xxxx111111.com/api/v1',    
  597.     bd: 'http://xxxxx22222.com/api'
  598. }
  600. export default base;
  601. 通过base.js来管理我们的接口域名，不管有多少个都可以通过这里进行接口的定义。
  602. 即使修改起来，也是很方便的。
  604. 最后就是接口模块的说明，例如上面的article.js:
  606. /**
  607.  * article模块接口列表
  608.  */
  610. import base from './base'; // 导入接口域名列表
  611. import axios from '@/utils/http'; // 导入http中创建的axios实例
  612. import qs from 'qs'; // 根据需求是否导入qs模块
  614. const article = {    
  615.     // 新闻列表    
  616.     articleList () {        
  617.         return axios.get(`${base.sq}/topics`);    
  618.     },    
  619.     // 新闻详情,演示    
  620.     articleDetail (id, params) {        
  621.         return axios.get(`${base.sq}/topic/${id}`, {            
  622.             params: params        
  623.         });    
  624.     },
  625.     // post提交    
  626.     login (params) {        
  627.         return axios.post(`${base.sq}/accesstoken`, qs.stringify(params));    
  628.     }
  629.     // 其他接口…………
  630. }
  632. export default article;
  636. 1.通过直接引入我们封装好的axios实例，然后定义接口、调用axios实例并返回，
  637.   可以更灵活的使用axios，比如你可以对post请求时提交的数据进行一个qs序列化的处理等。
  639. 2.请求的配置更灵活，你可以针对某个需求进行一个不同的配置。关于配置的优先级，
  640.   axios文档说的很清楚，这个顺序是：在 lib/defaults.js 找到的库的默认值，
  641.     然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。
  643. 3.restful风格的接口，也可以通过这种方式灵活的设置api接口地址。
  647. 最后，为了方便api的调用，我们需要将其挂载到vue的原型上。在main.js中：
  649. import Vue from 'vue'
  650. import App from './App'
  651. import router from './router' // 导入路由文件
  652. import store from './store' // 导入vuex文件
  653. import api from './api' // 导入api接口
  655. Vue.prototype.$api = api; // 将api挂载到vue的原型上
  656. 然后我们可以在页面中这样调用接口，eg：
  658. methods: {    
  659.     onLoad(id) {      
  660.         this.$api.article.articleDetail(id, {        
  661.             api: 123      
  662.         }).then(res=> {
  663.             // 执行某些操作      
  664.         })    
  665.     }  
  666. }
  667. 再提一下断网的处理，这里只做一个简单的示例：
  669. <template>  
  670.     <div id="app">    
  671.         <div v-if="!network">      
  672.             <h3>我没网了</h3>      
  673.             <div @click="onRefresh">刷新</div>      
  674.         </div>    
  675.         <router-view/>      
  676.     </div>
  677. </template>
  679. <script>
  680.     import { mapState } from 'vuex';
  681.     export default {  
  682.         name: 'App',  
  683.         computed: {    
  684.             ...mapState(['network'])  
  685.         },  
  686.         methods: {    
  687.             // 通过跳转一个空页面再返回的方式来实现刷新当前页面数据的目的
  688.             onRefresh () {      
  689.                 this.$router.replace('/refresh')    
  690.             }  
  691.         }
  692.     }
  693. </script>
  694. // 这是app.vue，这里简单演示一下断网。在http.js中介绍了，我们会在断网的时候，
  695. // 来更新vue中network的状态，那么这里我们根据network的状态来判断是否需要加载这
  696. // 个断网组件。断网情况下，加载断网组件，不加载对应页面的组件。当点击刷新的时候，
  697. // 我们通过跳转refesh页面然后立即返回的方式来实现重新获取数据的操作。因此我们需要
  698. // 新建一个refresh.vue页面，并在其beforeRouteEnter钩子中再返回当前页面。
  701. // refresh.vue
  702. beforeRouteEnter (to, from, next) {
  703.     next(vm => {            
  704.         vm.$router.replace(from.fullPath)        
  705.     })    
  706. }

（完）