vue中使用axios的多种方式

结合vue-axios，使用vue.use方法

//首先在主入口文件main.js中引用
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
//在组件文件中的methods里去使用
getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
    },

axios 改写为 Vue 的原型属性

//首先在主入口文件main.js中引用，之后挂在vue的原型链上
import axios from 'axios'
Vue.prototype.$axios= axios
//在组件中使用
this.$axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })

结合vuex 封装 axios

//首先引用,创建sercice.js
import axios from 'axios'
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (store.getters.token) {
    config.headers['X-Token'] = getToken()
     // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})
//respone拦截器
service.interceptors.response.use(
  response => response,}
  error => {
     if (error?.response?.status == 401) {          router.push({   
     name: "login"   
      })     
       }
       if(){
       .......}
    return Promise.reject(error?.response)
     // 返回接口返回的错误信息
  })

export default service

//import request from '@/utils/request'

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

本文地址：https://blog.csdn.net/weixin_43787651/article/details/112603816