使用 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]()
来源: http://www.bubuko.com/infodetail-3182140.html