axios的基本请求以及使用

axios的使用

Axios 是专注网络数据请求的库

相比于原生的 XMLHttpRequest 对象 axios 简单易用

相比于 jQuery axios 更加轻量化 只专注网络数据请求

1, axios.get()的使用

/ axios.get(‘地址’, {params: {数据。。。}}).then(成功时的处理函数);

axios.get(‘http://www.liulongbin.top:3006/api/getbooks’, {
params: {
id: 2
}
})
.then(function (res) {
// axios对响应的res部分进行了包装，之前jQuery中的res，相当于axios中的res.data
// - 刚开始使用时，可以使用以下操作
res = res.data;
console.log(res);
});

2. axios.post()的使用

// axios.post(‘地址’, {数据。。。}).then(成功时的处理函数)

axios.post(‘http://www.liulongbin.top:3006/api/post’, {
name: ‘jack’,
age: 18
})
.then(function (res) {
console.log(res);
});

3. axios()的使用

发送get和post的区别：

设置请求参数的属性名不同
get请求参数的属性名为params
post请求参数的属性名为data

3.1. axios()发送get请求

axios({
method: ‘GET’,
url: ‘http://www.liulongbin.top:3006/api/get’,
params: {
name: ‘jack’,
age: 18
}
})
.then(function (res) {
console.log(res.data);
});

3.2. axios()发送post请求

axios({
method: ‘POST’,
url: ‘http://www.liulongbin.top:3006/api/post’,
data: {
name: ‘rose’,
age: 21
}
})
.then(function (res) {
console.log(res.data);
});

axios的请求拦截器和响应拦截器的使用

请求拦截器的作用是在请求发送前进行一些操作:

// 后添加的拦截器,先执行!!!

    // 添加请求拦截器(回调函数)
    axios.interceptors.request.use(
        config=>{
            console.log('request interceptor 请求拦截器1');
            return config // return是为了继续向下传递, promise链式传递
        },
        error=>{
            console.log('request error, 请求拦截器失败1');
            return Promise.reject(error)// return Promise 是为了把错误继续向下传递
        })
    // 拦截器2先执行
    axios.interceptors.request.use(
        config=>{
            console.log('request interceptor 请求拦截器2');
            return config
        },
        error=>{
            console.log('request error, 请求拦截器失败2');
            return Promise.reject(error)