Axios库使用

Axios库使用

Axios是一个http请求处理的js类库

Axios的使用与$.ajax方式不同,以下是示例

axios.post(【请求地址】, 【表单】)
    .then(function (response) {
    	console.log(response);
    })
    .catch(function (error) {
    	console.log(error);
    });

Axios分为三部分

  • post【也可以是get等】
  • Then【处理正常返回信息,可以多个,顺序执行】
  • Catch【处理前端请求异常,例如404等】

拦截器的配置

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在请求发送前处理,通常是加token
    return config;
}, function (error) {
    //提示异常信息
    return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 处理响应信息
    var data = response.data;//后台返回的数据
    // 此处是因为后台采用了通用的返回,否则这样的处理会出错
    if(data.success){
        return data.data;
    }else{
        //提示异常信息,
        alert(data.message);
        //【重点】进入catch,而不是then
        return Promise.reject(data.message);
    }
}, function (error) {
    //提示异常信息
    return Promise.reject(error);
});

在配置了拦截器后,前台就不需要在使用catch进行错误捕获了,因为错误都已经处理了,只专心于成功的请求

axios.post(【请求地址】, 【表单】)
    .then(function (response) {
        //此时的response就是后台返回的有效数据,不再包含标志信息
    	console.log(response);
    });