使用axios首先要下载axios模块包
npm install axios --save
其次需要在使用的文件中引入
import axios from 'axios'
一、调用axios常见两种方法(此处使用easy-mock模拟数据接口):
//方法1 axios({ method: 'post', url:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios' }) .then((response)=>{ console.log(response.data) }) .catch((error)=>{ console.log(error) })
//方法2 axios.post('http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios',{ miaov:"课堂" //发送的数据 }) .then((response)=>{ console.log(response.data) }) .catch((error)=>{ console.log(error) })
注意:
方法一中向后台发送数据时:
//get方式发送数据 axios.get('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', { params: { pomelo: 'tt', test: 'test' } }).then((response) => { console.log(response) }).catch((error) => { console.log(error) }) //post方式发送数据 axios.post('https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock', { pomelo: 'tt', test: 'test' }).then((response) => { console.log(response) }).catch((error) => { console.log(error) })
二、自定义请求实例
//常见请求实例配置项 { baseURL: ‘’, //基础URL timeout:1000, //请求延时时间 headers {'X-Requested-With': 'XMLHttpRequest'}, //自定义请求头内容 responseType: 'json', //请求数据类型包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' params: {}, //无论请求为何种类型,在params中的属性都会以key=value的格式在urlzhong拼接 transformRequest: [function(data){ return data }], // 只适用于 POST,PUT,PATCH,transformRequest` 允许在向服务器发送前,修改请求数据。后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream transformResponse: [function(data){ return data }], //transformResponse` 在传递给 then/catch 前,允许修改响应数据 validateStatus: function(status){
return status < 400 //状态码小于400时均为成功(返回true)
}, //validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise 将被 resolve; 否则,promise 将被 rejecte cancelToken //取消请求,下文详细说明 }
使用自定义请求实例时需要先创建对象
var HTTP = axios.create({}) // {}中放入上文中的配置项
使用transformRequest将数据格式改为key=value的格式
import queryString from 'queryString' //转换格式包,无需下载 var HTTP = axios.create({ baseURL:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/', timeout: 1000, responseType:'json', headers:{ 'custome-header': 'miaov', 'content-type':'application/x-www-form-urlencoded' //转换为key=value的格式必须增加content-type }, transformRequest:[function(data){ console.log(data) data.age = 30; //发送之前增加的属性 return queryString.stringify(data); //利用对应方法转换格式 }] })
axios并发请求,通过axios。all()方法,需在两个请求都完成后才能被成功调用
export default { name: 'hello', created(){ function http1(){ return HTTP.get("test-axios") } function http2(){ return HTTP.post("test-post-axios") } //注意此时常使用axios.spread()方法接收多个响应数据 axios.all([http1(),http2()]).then(axios.spread((res1,res2)=>{ console.log(res1) console.log(res2) })) .catch((error) =>{ if (axios.isCancel(error)) { console.log(error.message); }else{ console.log(error) } }) } }
axios拦截器
(1)拦截请求(在发送请求之前做某事)
axios.interceptors.request.use(function(config){ //在发送请求之前做某事 console.log("拦截") console.log(config) //单次请求的配置信息对象 return config; //只有return config后,才能成功发送请求 },function(error){ //请求错误时做些事 return Promise.reject(error); });
(2)拦截响应
HTTP.interceptors.response.use(function(data){ console.log("response") console.log(data) //响应数据 return data; //只有return data后才能完成响应 })
当大量使用axios时,可以将axios作为vue的插件全局使用
首先需要安装axios,vue-axios
npm install axios vue-axios --save
将其作为插件
Vue.use(VueAxios, Axios) //注意顺序与大小写
当在其他任意组件中使用时可使用以下方式:
this.$http[method]()