异步请求 - Axios

Axios

项目引入

// 使用npm
npm install axios

// 使用CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

案例

执行GET请求

//执行GET请求
axios.get('/user?id=1234')
.then(res => {
  console.log(res);
})
.catch(err => {
  console.log(err);
});

执行POST请求

// 执行POST请求 | 或者GET请求
axios.post/get('user', {
    params: {
        id: 1234
    }
})
.then(res => {
    console.log(res);
})
.catch(err => {
    console.log(err);
});

并发多个请求

// 执行多个并发请求
function getUserAxiosFuncOne() {
    return Axios.get('/user/1234');
}
function getUserAxiosFuncTwo() {
    return Axios.get('/user/1234/permissions');
}
axios.all([getUserAxiosFuncOne(),getUserAxiosFuncTwo()])
.then(axios.spread((acct,perms) => {
    // 至此，两个请求都已完成
}))

axios API

axios(config)

// 发送POST请求
axios({
    methods: 'post',
    url: 'user/1234',
    data: {
        name: 'elio',
        age: 25
    }
});

// 获取数据资源
axios({
    methods: 'get',
    url: 'getData'
}).then(res => {
    console.log(res);
})

创建axios实例

axios.create([config])

const instance = axios.create({
    baseURL: '', // process.env.VUE_APP_API_URL 多数是从项目的env文件中获取
    methods: 'get', // default -> get
    withCredentials: false, // default
        headers: {'Content-Type': 'application/json'} // 自定义请求头
})

配置详解

{
    url : '', // 用于请求的服务器URL
    method: 'get', // default
    baseURL: '', // 自动加在url前面
    headers: {}, // 自定义请求头
    params: {}, // 请求携带参数
    timeout: 1000, // 请求超时毫秒数
    // 允许在向服务器发送前，修改请求数据。只能用在put/post/patch
    transformRequest: [(data. headers) => {
        // 对data进行转换处理
        return data
    }],
    // 在传递给then/catch前，允许修改响应数据
    transformResponse: [data => {
        // 对data进行转换和处理
        return data;
    }],
    // 表示跨域请求时是否需要使用凭证
    withCredentials: false // default,
    responseType: 'JSON' // 响应数据的类型
    maxContentLength: 2000 // 定义允许的响应内容的最大尺寸
    // 定义对于给定的HTTP响应状态码是resolve或reject promise。
    validateStatus: function(status) {
        return status >=200 & status < 300; // default
    }
}

实例方法

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])

拦截器

// 在请求或响应被then/catch处理前拦截它们
// 添加请求（request）拦截器
axios.interceptors.request.use(
    config => {
        // 发送请求前需要做的事 + 返回config
        return config;
    },
    error => {
        // 对请求错误做的事
        return Promise.reject(error);
    }
);

// 添加响应（response）拦截器
axios.interceptors.response.use(
    res => {
        // 对响应数据做的事 + 返回改造后的响应数据
        return res;
    },
    error => {
        // 对响应错误做的事
        return Promise.reject(error);
    }
);

// 移除拦截器
axios.interceptors.request.eject(拦截器名称)

// 或者创建axios实例，添加拦截器
const instance = axios.create();
instance.interceptors.request.use(() => {});