axios的二次封装及调用

目录

一、axios的封装

二：调用

---

一、axios的封装

1、安装axios

npm i axios --save-dev

2、在根目录下创建api文件夹，创建request.js文件进行封装

import axios from "axios";

let mes = window.location;
// 此部分视个人情况
// let _baseurl=''
// if(mes.hostname=='localhost'){
//      _baseurl='/api/'   开发环境下
// }else{
//      _baseurl='http:xxx'   生产环境下
// }
let _baseurl = `//${mes.hostname}:${mes.port}`;
const request = axios.create({
    baseURL:_baseurl,  //请求的地址
	timeout: 30 * 1000, //请求超时时间：30秒
	withCredentials: true // 表示跨域请求时是否需要使用凭证
});

// 请求拦截器
request.interceptors.request.use(
	config => { //配置信息处理
		return config;
	},
	error => { //错误处理
		console.log(error);
		return Promise.reject(error);
	}
);

// 响应拦截器
request.interceptors.response.use((res) => { // 请求成功的回调函数
	// console.log(res);
	// return  res.data;
	return  res;
},(err) => { // 请求失败的回调函数
    return Promise.reject('fail');
});

export default request;

3、在api文件夹下创建index.js文件

//导入request文件
import request from './request.js'


//测试接口 get
 export function test(params) {
     return request({
         url: '/apptest',
         method: 'GET',
         params
     })
 }

// 测试接口 post
export function test(data) {
    return request({
        url: '/apptest',
        method: 'POST',
        data,
    })
}

二：调用

  async toLogin() {
      let data={'test':'123'}
      let res=await test(data);
  }