结合vuex封装axios方法 - web建站教程手机端

axios封装apis.js

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
    config.headers['X-Token'] = getToken() 
  }
  return config
}, error => {
  //错误
  console.log(error)
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => response,
  // 根据res.code编码判断
  //  const res = response.data;
  //     if (res.code !== 20000) {
  //       //判断
  //       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //         // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //       }
  //       return Promise.reject('error');
  //     } else {
  //       return response.data;
  //     }
  error => {
    //错误
    Message({
      message: error.message,
      type: 'error',
      duration: 3000
    })
    return Promise.reject(error)
  })

export default service

模版调用

import request from '@/utils/apis'

//使用
export function getInfo(params) {
  return request({
    url: '/user/list',
    method: 'get',
    params
  });
}

Pinia与Vuex的区别（在选择状态管理库时，哪个更优）

Vuex中文文档官网介绍

标签： Vuex语法, 封装axios

上面是“结合vuex封装axios方法”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_14681.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！