vue axios的二次封装

第一步：在当前根目录下打开终端 

                下载axios   npm install axios  -S

      （1）在main.js中引入axios

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

import 'lib-flexible/flexible'
import axios from 'axios'


Vue.config.keyCodes.enter = 13
Vue.config.productionTip = false
Vue.prototype.axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第二步：新建一个vue.config.js文件

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: 'http://www.ibugthree.com/', // 想要访问接口域名
        changeOrigin: true, // 开启跨域,在本地创建一个虚拟服务,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据交互就不会有问题
        pathRewrite: {
          "^/api": '', // 利用这个地面的值拼接上target里面的地址
        }
      }
    }
  },
}

第三步：在src文件夹下新建api

3.1：api里新建request.js文件夹  里面写入：

// 这是axios二次封装
import axios from 'axios'
 
//定义一个延迟数据
let timeout=3000
 
export const Service=axios.create({
    timeout:timeout,//延迟时间
    method:'POST',
    headers:{
        "content-Type":"application/x-www-form-urlencoded", //post 必须写这个
        "pc-token": "4a82b23dbbf3b23fd8aa291076e660ec", //后端提供
    }
});
 
 
// 请求拦截
Service.interceptors.request.use(config=>{
    console.log("请求拦截")
    return config;
})
 
 
// 响应拦截
Service.interceptors.response.use(response=>{
    console.log("响应拦截")
    //返回数据
    return response.data
},err=>{
    console.log(err)
})

3.2：api文件夹里面新建index.js 写入：

import { Service} from "./request";
 
// 车辆搜索
export function searchCar(config){
    let params=new URLSearchParams()
    params.append("page",config.page)
    params.append("mod",config.mod)
    return Service({
        url:'/api/oldcar/searchCar',
        method:'post',
        data:params
    })
}
 
// 车辆搜索关键词
export function searchList(config){
    let params=new URLSearchParams()
    params.append("page",config.page)
    params.append("mod",config.mod)
    return Service({
        url:'/api/oldcar/searchList',
        method:'post',
        data:params
    })
}

第四步：在需要的页面 .vue里面引入使用

//引入axios
import { searchCar } from "@/api";
 
export default {
  async created() {
    const data = await searchCar({ page: 1, mod: "宝马" });
    console.log(data);
  },
}

也可以把它封装为一个方法调用

        async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。

 
methods:{
 // 封装一个方法
    async searchCarAsync() {
      try {
        const data = await searchCar({ page: 2, mod: "奔驰" });
        console.log(data);
        //这是循环添加到数组  data里面定义一个数组添加到里面循环页面
        for (var i = 0; i < data.length; i++) {
          this.carList.push(data[i]);
        }
      } catch (error) {
        console.error("@searchCarAsync:", error);
      }
    },
},
//这里可以调用一下
 created() {
    this.searchCarAsync();
 },

try catch:自己处理异常

try{
        可能出现异常的代码

}catch(异常类名A  e){
        如果出现了异常类A类型的异常，那么执行该代码

}....(catch可以有多个)

finally{
        最终肯定必须要执行的代码(例如释放资源的代码)

}