vue封装axios

用vue封装axios的步骤

  1. 安装axios
  npm install axios 
  1. 在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)