vue封装axios（自己总结）

用vue封装axios的步骤

安装axios

  npm install axios

在src目录下新建文件夹network，新建三个文件夹
(1)新建一个core.js文件，导入

//导入
import { GET, POST } from "./config"
import axios from 'axios'

const instance = axios.create({
    baseURL: "https://api.it120.cc",//发送请求时，会在url前拼接baseurl
    timeout: 3000
})

//三个参数：请求方式、路径、传递的参数
export function request(method, url, params) {
    switch (method) {
        case GET:
            return get(url, params)//在此调用下面get函数
        case POST:
            return post(url, params)//在此调用下面post函数
    }
}


function get(url, params) {
    return instance.get(url, params)
}

function post (url,params) {
    return instance.post(url,params);
}

（2）新建config.js文件，api接口统一管理

//统一管理请求方式
export const GET="get";
export const POST="post";

//抛出
export const path = {
	//请求接口
    list:"/small4/shop/goods/list",
}

（3）新建index.js文件，引入

//引入
import {request} from "./core"
import {GET,path} from "./config"

const network = {
    getlist(params) {return request(GET,path.list,params)}
}
export default network;

完成以上代码后，在main.js文件中配置全局network：

import network from './network/index'
Vue.prototype.$network = network;

在需要的组件中调用：

 mounted() {
    this.$network.getlist({
      page:"1",
      pageSize:"10"
    }).then((res) => {
      console.log(res)
    }).catch((error) => {
      console.log(error);
    })
  },

vue封装axios（自己总结）

用vue封装axios的步骤

猜你喜欢