axios基础分享

哪有有问题欢迎指正

1、json-server：模拟服务器

npm install json-server -g

启动json-server服务器：

json-server --watch db.json

json-server设置延时:

json-server --watch db.json -d

2、axios常用请求

1）get：用来获取数据

axios({
    method: 'get',
    url: 'http://a.com'
}).then(res=>console.log(res))

2）post：新增数据

axios({
    method: 'post',
    url: 'http://a.com',
    data: {
        "title": "es6",
        "author": "Mary"
    }
}).then(res=>console.log(res))

3）put：更新数据

axios({
    method: 'put',
    url: 'http://a.com',
    data: {
        "title": "javascript",
        "author": "leo"
    }
}).then(res=>console.log(res))

4）delete：删除数据

axios({
    method: 'delete',
    url: 'http://a.com'
}).then(res=>console.log(res))

3、axios其他请求方式

1）request

axios.request({
    method: 'GET',
    url: 'http://a.com'
}).then(res=>console.log(res))

2）post

axios.post("http://localhost:3000/comments",{
    "body": "今天天气很闷热！",
    "postId": 2
}).then(res=>console.log(res))

其他请求方式：点击此处查看

4、axios请求响应结果

config：配置对象。包括请求类型、url、请求体等

data：响应体。axios将响应结果做json解析，解析成对象，方便处理

headers：响应头部信息。

request：原生ajax请求对象。

status：响应状态码。

statusText：响应状态。

5、axios请求对象

指axios调用时，请求的配置参数对象。

url：请求路径

method：请求类型

baseURL：设置url的基础路径

transformRequest：处理请求数据，并将处理后的结果发送给服务器

transformResponse：处理响应的结果

headers：配置请求头信息

params：设置url参数。设置后的参数会拼接到url后

paramsSerializer：参数序列化。将url参数转换成特定字符串

timeout：请求发送时间。超过指定时间，请求被取消。单位：ms

withCredentials：表示跨域请求时是否需要使用凭证

其他参数：点击此处查看英文
中文

6、创建实例化对象发送请求

const _axios = axios.create({
    baseURL: 'http://a.com',
    method: 'get',
    timeout: 2000
})
const other = axios.create({
    baseURL: 'http://b.com',
    method: 'get',
    timeout: 2000
})
_axios({
    url: '/posts',
}).then(res=>console.log(res))

可同时创建多个axios实例，针对不同服务器发送请求。如上other实例

7、拦截器

1)请求拦截器：在发送请求之前，借助函数对请求体做预处理或检测。

axios.interceptors.request.use(config=>{
    config.params = {a: 100}
    return config;
},error=>{
    return Promise.reject(error)
})

config：配置对象。可以在请求拦截器中修改config拦截参数。比如设置请求参数param

2)响应拦截器：当服务器返回结果后，可以对结果做预处理以便开发者更好使用数据

axios.interceptors.response.use(response=>{
    return response;
},error=>{
    return Promise.reject(error)
})

8、取消请求

var cancel = null;
eleSend.onclick = function(){
    if(cancel != null){
        cancel();
    }else{
        axios({
            url: 'http://a.com',
            method: 'GET',
            cancelToken: new CancelToken(c=>{
                cancel = c;
            })
        }).then(res=>{
            console.log(res)
            cancel = null;
        }).catch(error=>console.log(error))
    }
}
eleCancel.onclick = function(){
    cancel();
}

阻止多次请求占用资源：判断以上cancel的值，为null，可二次请求，否则不允许。