封装axios以及利用

1.封装axios：

在项目的src目录下，新建一个request文件夹，里面新建一个instance.js文件，写入一下内容：(以get请求为例)

//首先加载axios

npm i axios

//在instance.js文件引入axios

import axios from "axios";

let instance=axios.create({
baseURL:"基地址"，//例如：baseURL: 'http://1.14.239.98'
timeout：10000，//设置超时时间
})

//请求拦截器
//请求拦截
instance.interceptors.request.use(
function(config){
 console.log("请求之前的配置项：", config);
//这里可以对数据进行修改，然后返回
//比如：给数据加个头部
 config.headers["meedu-platform"] = "H5";
return config;
}，
function(error){
return Promise.reject(error);
}
)

//响应拦截器
instance.interceptors.response.use({
function(response){
console.log("响应拦截器响应的数据,", response);
return response.data;
},
function(error){
return Promise.reject(error);
}
});
export default instance;//把instance暴露出去

//在入口文件main.js中，将请求实例挂载在Vue的原型上

//引入请求库，并挂在vue原型上面，以后每个Vue实例中，可以直接引用请求实例
import instance from '@/api/instance';
Vue.prototype.$request=instance;

//接下来，可以直接单文件组件中，通过 this.$request发起请求，获取数据

ansyc create(){
//get请求有参数的话，要用params，没有的话，直接写接口地址就好
let res = await this.$request.get("/api/v2/viewBlock/page/blocks"，//接口地址
{
params:{
 platform: "h5",
        page_name: "h5-page-index",
}
}),
console.log(res);
}

//或者以下写法
create(){
//get请求有参数的话，要用params，没有的话，直接写接口地址就好
this.$request.get("/api/v2/viewBlock/page/blocks"，//接口地址
{
params:{
 platform: "h5",
        page_name: "h5-page-index",
}
}).then(res=>{
console.log(res)
})
}