Axios使用详情

1，下载axios组件

npm install axios

2，引入axios

// 引入axios
import axios from 'axios';

3，发起get请求

axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY'
})
  .then(function(response) {
    console.log(response);
});

4，发起post请求

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res => {
    console.log(res);
});

5，request封装

（1）创建实例

// 创建axios实例
const httpService = axios.create({
    //默认请求地址
    baseURL: 'https://some-domain.com/api/',
    // 请求超时时间
    timeout: 3000 // 需自定义
});

（2）请求拦截

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

（3）响应拦截

// respone拦截器
httpService.interceptors.response.use(
    response => {      
        return response.data;       
    },
    // 错误处理
    error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '错误请求';
                    break;
                case 401:
                    error.message = '未授权，请重新登录';
                    break;
                case 403:
                    error.message = '拒绝访问';
                    break;
                case 404:
                    error.message = '请求错误,未找到该资源';
                    break;
                case 405:
                    error.message = '请求方法未允许';
                    break;
                case 408:
                    error.message = '请求超时';
                    break;
                case 500:
                    error.message = '服务器端出错';
                    break;
                case 501:
                    error.message = '网络未实现';
                    break;
                case 502:
                    error.message = '网络错误';
                    break;
                case 503:
                    error.message = '服务不可用';
                    break;
                case 504:
                    error.message = '网络超时';
                    break;
                case 505:
                    error.message = 'http版本不支持该请求';
                    break;
                default:
                    error.message = `未知错误${error.response.status}`;
            }
        } else {
            error.message = "连接到服务器失败";
        }
        return Promise.reject(error);
    }
)

（4）使用时导入

import request from "@/api/request";

（5）调用方法

request.post('/employee/login', this.user).then(res => {
          if (res.msg == '登录失败') {
            this.$router.push("/");
          } else {
            sessionStorage.setItem("SESSION_USER", JSON.stringify(res.data));
            this.$router.push("/index");
          }
        })