vue安装axios以及如何使用axios

大家好，欢迎来到IT知识分享网。

第一步 使用命令 npm install axios  （可以在node_modules文件里面找到axios文件就是安装成功了

）

 第二步 在main.js引入axios文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'

//引入axios请求 并配置域名
import axios from 'axios'

// 创建 axios 实例
const requests = axios.create({
  baseURL: 'https://www.ddd.com/', // 基础url,如果是多环境配置这样写，也可以像下面一行                            的写死。
  timeout: 6000 // 请求超时时间
})

//将axios挂载到vue实例上
Vue.prototype.axios = requests

 第三步 使用axios

export default {
  name: "Footer",
  data() {
    return {
      
    }
  },
  created() {
    this.ceshi()
  },
  methods: {
    ceshi(){
       //需要将axios挂载到vue实例上才可以这样使用，第二步有写，可参考
      this.axios({
        //完整的请求接口是https://www.ddd.com/solitaireMgr/solitaireAPI.do
        //这是因为第二步已经设置了每个请求前面都接上https://www.ddd.com/
        url:'solitaireMgr/solitaireAPI.do',
        method:'get',
        params:{
          userId:'981415' 
        }
      }).then((res) => {
        console.log("获取到的数据 res ==>",res);
      })
    }
  },
}

axios的拦截器

// 请求拦截器（请求到服务器前会执行，可在里面执行业务代码）
requests.interceptors.request.use(config => {
  
    console.log("请求拦截器 ==>",config);
    if(config.method == 'post'){
       console.log('这是还需要处理post请求的数据 ');
    }
    return config
  })
  
  // 接收拦截器（服务器返回回来的数据 给到前端前会触发，在里面执行业务代码）
  requests.interceptors.response.use((response) => {
    const res = response
    console.log("接收拦截器 ==>",response);
    return res
  })
  

如果有什么不对或者不好的地方，请多多指教