axios参考：https://github.com/axios/axios、http://www.axios-js.com/zh-cn/docs/#axios-delete-url-config-1、https://axios.nuxtjs.org/usage

axios封装参考：https://blog.csdn.net/weixin_44356673/article/details/107467614

nuxt使用参考：https://blog.csdn.net/qq_41387882/article/details/106294485

axios的封装

在plugins中创建axios_interceptors.js文件,封装axios

  1. const qs = require('qs');
  2. import Vue from 'vue'
  3. export default function ({ $axios, store }, inject) {
  4.   const myAxios = $axios.create({
  5.     timeout: 1000 * 60
  6.   })
  8.   // ! 响应的拦截
  9.   /**
  10.    * todo 提示函数
  11.    * 禁止点击蒙层、显示一秒后关闭
  12.    */
  13.   const tip = msg => {
  14.     Vue.prototype.$message.error(msg, 10);
  15.   }
  17.   /**
  18.   * todo 跳转登录页
  19.   * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
  20.   */
  21.   const toLogin = () => {
  22.     // router.replace({
  23.     //   path: '/login',
  24.     //   query: {
  25.     //     redirect: router.currentRoute.fullPath
  26.     //   }
  27.     // })
  28.     window.onNuxtReady(() => {
  29.       window.$nuxt.$router.replace({
  30.         path: '/login',
  31.         query: {
  32.           // 保存上一个页面的访问路径
  33.           redirect: router.currentRoute.fullPath
  34.         }
  35.       })
  36.     })
  37.   }
  39.   /**
  40.    * todo 请求失败后的错误统一处理
  41.    * @param {Number} status 请求失败的状态码
  42.    */
  43.   const errorHandle = (status, msg) => {
  44.     switch (status) {
  45.       // 401: 未登录
  46.       // 1. 跳转登录页面，并携带当前页面的路径
  47.       // 2. 在登录成功后返回当前页面，这一步需要在登录页操作。
  48.       case 401:
  49.         toLogin()
  50.         break
  52.       // 403 token过期
  53.       // 登录过期对用户进行提示
  54.       // 清除本地token和清空vuex中token对象
  55.       // 跳转登录页面
  56.       case 403:
  57.         tip('登录过期，请重新登录')
  59.         // 清除token
  60.         localStorage.removeItem('token')
  61.         store.commit('loginSuccess', null)
  63.         // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
  64.         setTimeout(() => {
  65.           toLogin()
  66.         }, 1000)
  67.         break
  69.       // 404请求不存在
  70.       case 404:
  71.         tip('网络请求不存在')
  72.         break
  74.       case 504:
  75.         tip('服务器错误')
  76.         break
  78.       // 其他错误，直接抛出错误提示
  79.       default:
  80.         tip(msg)
  81.         break
  82.     }
  83.   }
  85.   // todo 移除 loding
  86.   const removeLoding = (url) => {
  87.     console.log(url, 'removeLoading');
  88.     store.commit('loading/removeLoadingCount');
  89.   }
  91.   // todo 请求拦截
  92.   myAxios.onRequest(config => {
  93.     // todo 解决get请求传递数组参数出现 [ ] 解决方法
  94.     if (config.method === 'get') {
  95.       // 格式化get的请求参数
  96.       config.paramsSerializer = function (params) {
  97.         // qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) // 'a[0]=b&a[1]=c'
  98.         // qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) // 'a[]=b&a[]=c'
  99.         // qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) // 'a=b&a=c'
  101.         return qs.stringify(params, { arrayFormat: 'repeat' })
  102.       }
  103.     }
  105.     // 登录流程控制中，根据本地是否存在token判断用户的登录情况
  106.     // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
  107.     // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
  108.     // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
  109.     const token = store.state.token
  110.     token && (config.headers.Authorization = token)
  111.     return config
  112.   })
  114.   // todo 请求失败
  115.   myAxios.onRequestError(error => Promise.error(error))
  117.   // todo 返回成功
  118.   // 如果返回的状态码为200 并且为ACK，说明接口请求成功，可以正常拿到数据
  119.   // 否则的话抛出错误
  120.   myAxios.onResponse(res => {
  121.     removeLoding(res.config.url) // 移除loading
  122.     // console.log(res, '=====');
  123.     return res.status === 200 ? Promise.resolve(res) : Promise.reject(res)
  124.   })
  126.   // todo 返回失败
  127.   // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  128.   // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  129.   // 下面列举几个常见的操作，其他需求可自行扩展
  130.   myAxios.onResponseError(error => {
  131.     removeLoding() // 移除loading
  132.     console.log(error, '======')
  133.     const { response } = error
  134.     console.log(response)
  135.     if (response) {
  136.       // 请求已发出，但是不在2xx的范围
  137.       errorHandle(response.status, response.data.message)
  138.       return Promise.reject(response)
  139.     } else {
  140.       console.log('========================== aaa');
  141.       // 处理断网的情况
  142.       // eg:请求超时或断网时，更新state的network状态
  143.       // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
  144.       // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
  145.       store.commit('changeNetwork', false)
  146.     }
  147.   })
  149.   // 重写axios的方法----统一处理请求参数
  150.   myAxios.$get = (...arg) => {
  151.     return fn('get', ...arg)
  152.   }
  154.   myAxios.$post = (...arg) => {
  155.     return fn('post', ...arg)
  156.   }
  158.   myAxios.$put = (...arg) => {
  159.     return fn('put', ...arg)
  160.   }
  162.   /**
  163.    * ! 公共请求方法
  164.    * @param {String} url [请求的url地址]
  165.    * @param {Object} params [请求时携带的参数]
  166.    * @param {Object} options [其他配置]
  167.    *  如果返回500，是因为后台判断不是ajax请求，需要传递 headers
  168.       headers: {
  169.         'x-requested-with': 'XMLHttpRequest',
  170.         "x-form-id": "mob-form"
  171.       }
  172.    */
  173.   function fn (methods, ...arg) {
  174.     let [url, params, options = {}] = arg
  176.     let opts = Object.assign({
  177.       loading: true,
  178.       tip: true
  179.     }, options)
  181.     // 添加loading
  182.     if (opts.loading) {
  183.       console.log(url, 'loding', methods);
  184.       store.commit('loading/addLoadingCount')
  185.     }
  187.     const baseUrl = process.env.baseURL
  189.     return new Promise((resolve, reject) => {
  190.       // axios的请求要求是get或delete的时候参数是放在对象中的params下面的
  191.       params = methods === 'get' || methods === 'delete' ? { params } : params
  193.       let requestData = {}
  194.       if (opts.headers) {
  195.         requestData.headers = opts.headers
  196.       }
  198.       myAxios[methods](baseUrl + url, params, requestData).then(res => {
  199.         if (res && res.data && res.data.code === 'ACK') {
  200.           resolve(res.data)
  201.         } else {
  202.           (res && opts.tip) && tip(res.data.message)
  203.           reject(res)
  204.         }
  205.       })
  206.     })
  207.   }
  209.   // myAxios.myGet = function () {}
  210.   // Inject to context as $api
  211.   inject('myAxios', myAxios)
  212. }

使用封装的axios

在plugins中创建api/api.js

  1. // 接收inject的myAxios
  3. export default function({$myAxios, store}, inject) {
  5.   inject('api', {
  6.     // 因为$myAxios无法获取,所以只能传入
  7.     user: require('./user.js').mount($myAxios),
  8.   })
  9. }

user.js

  1. export function mount (axios) {
  2.   return {
  3.     // 获取用户信息
  4.     getUser: async (id, ...arg) => {
  5.       return await axios.$post('/sys-user/' + id, ...arg)
  6.     },
  7.   }
  8. }

使用用户信息接口

  1. // todo 第一种
  2. this.$api.user.getUser('11', {param: 11}, {loading: false}).then(result => {
  3.   // 成功的回调
  4. }, err => {
  5.   失败的回调
  6. })
  8. // todo 第二种
  9. les result = await this.$api.user.getUser('11', {param: 11}, {loading: false}).catch((err) => {
  10.   // 捕捉异常的情况
  11.   console.log(err)
  12. })

插件在nuxt.js中的配置

  1.  plugins: [
  2.     '@/plugins/antd-ui', // UI框架
  3.     "@/plugins/axios_interceptors", // 在client和service上生效
  4.     "@/plugins/api/api", // 在client和service上生效
  5.   ],
  7.  // 使用axios的模块
  9.  // Modules: https://go.nuxtjs.dev/config-modules
  10.   modules: [
  11.     '@nuxtjs/axios',
  12.     '@nuxtjs/style-resources'
  13.   ],