安装:npm install axios
基础使用:
axios发送请求:
//发送AJAX请求 axios({ //请求类型 method:'GET', //URL url:'', //axios返回一个promise对象,成功用.then接受返回结果 }).then(response=>{ console.log(response) })
//发送AJAX请求 axios({ //请求类型 method:'POST', //URL url:'', //设置请求体 data:{ title:'', author:'' } //axios返回一个promise对象,成功用.then接受返回结果 }).then(response=>{ console.log(response) })
//发送AJAX请求 axios({ //请求类型 method:'PUT', //URL url:'', //设置请求体 data:{ title:'', author:'' } //axios返回一个promise对象,成功用.then接受返回结果 }).then(response=>{ console.log(response) })
//发送AJAX请求 axios({ //请求类型 删除请求大小写都行 method:'delete', //URL url:'', //axios返回一个promise对象,成功用.then接受返回结果 }).then(response=>{ console.log(response) })
axios方法发送请求(很多方法)
//发送GET请求 //axios() axios.request({ //请求类型 method:'GET', //URL url:'', //request请求返回一个promise对象,成功用.then接受返回结果 }).then(response=>{ console.log(response) })
//发送POST请求 //post请求接受到三个参数 //第一个参数要请求的接口 //第二个参数要发送的参数数据(可选) //第三个参数配置对象(可选) //axios() axios.post( '接口', { 'body':'', 'postId':'' }).then(response=>{ //post请求返回一个promise对象,成功用.then接受返回结果 console.log(response) })
axios的设置默认配置
axios创建实例对象
备注:如果有多个服务器可以创建多个实例对象
拦截器
//内部原理Promise //设置请求拦截器 axios.interceptors.request.use(function(config){ console.log('请求拦截器 成功'); //设置请求时间 config.timeout = 2000 return config },function(error){ console.log('请求拦截器失败'); return Promise.reject(error) }) //设置响应拦截器 axios.interceptors.response.use(function(response){ console.log('响应拦截器 成功'); return response },function(error){ console.log('响应拦截器 失败'); return Promise.reject(error) }) axios({ method:'GET', url:'http://localhost:3000/posts' }).then(response=>{ console.log('成功的回调',response); }).catch(reject=>{ console.log('失败的回调',reject); })
取消请求
//2.声明全局变量 let cancel = null //检测上一次的请求是否完成 if(cancel != null){ // 取消上一次的请求 cancel() } axios({ method:"GET", url:'http://localhost:3000/posts', //1.添加配置对象属性 cancelToken:new axios.CancelToken(function(c){ //将c赋值给cancel cancel = c }) }).then(response=>{ console.log(response); //成功后将cancel的值初始化 }) //取消请求 cancel()