axios是一个基于Promise的http库,可以用在浏览器和node.js中。同时也是对原生浏览器请求XMLHttpRequest的封装,支持Promise的APi请求,避免了回掉地狱问题,可以对请求进行拦截,在发出请求前对请求参数进行修改,接受服务器响应时,也可以根据返回的code进行统一的处理,且客户端支持防御XSRF。可以开箱即用,但是在实际项目时,需要对axios进行二次封装
实例 Or defaults
对 axios 进行二次封装由两种方式,一种是创建一个axios实例,另外一种是直接修改axios的defaults
import axios from 'axios';
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
import axios from 'axios';
axios.defaults.baseURL = SERVICE;
当然在使用第一种创建一个实例时,也可以设置这个实例的defaults,就像这样
import axios from 'axios';
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
instance.defaults.baseURL = SERVICE;
设置baseURL
在前后端分离项目,往往需要定义一个全局变量来声明后台的接口地址,一般我会选择通过 webpack 的 definePlugin 插件来给页面设置全局变量,并且根据不同的环境传递不同的值。比如说后台的接口部署在了 http://localhost:3000
那么首先使用 webpack 定义一个叫 SERVICE 的全局变量
new webpack.DefinePlugin({
SERVICE: "'http://localhost:3000'"
})
然后就可以在页面中使用这个全局变量,当然如果是在ts项目下的话,直接使用SERVICE会抱一个未定义的错,那么只需要在使用SERVICE的文件中申明一下即可,未使用ts 的可以跳过这句声明。
im