第一步 使用命令 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
  })
  

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐