axios的封装和使用
import config from '../api/config'
import axios from 'axios'
import {getLocal} from '../utils/local'
class HttpRequest { //初始化构造函数,this指向的是HttpRequest constructor(){ this.baseURL = config.baseURL; this.timout = 3000; } setInterceptors(instance){ //创建拦截器 instance.interceptors.request.use(config=>{ // 一般增加一些token属性等 jwt config.headers.token = 'token'
// 设置了config需要返回
return config
}); //响应拦截器 instance.interceptors.response.use(res=>{ if (res.status == 200) { return Promise.resolve(res.data); }else { return Promise.reject(res.data) } },err=>{ switch (err.response.status) { case '401': console.log(err) break; default: break; } return Promise.reject(err) }) } mergeOptions(options){ return { baseURL:this.baseURL,timout:this.timout,...options } } //真正发送请求在这 request(options){ const instance = axios.create(); this.setInterceptors(instance); const opts = this.mergeOptions(options); return instance(opts); } //封装get方法 get(url,config){ return this.request({ method:'get', url, params:config, }) } //封装post方法 post(url,data){ return this.request({ method:'post', url, data:data, }) } } export default new HttpRequest;
调用:
把url和请求分开放进js文件里
引入封装好的axios和url文件
最后在页面中调用