从零开始学VUE之网络模块(Axios)

从零开始学VUE之网络模块(Axios)

Axios

功能特点

• 在浏览器中发送XHR请求
• 在Node.js中发送http请求

• 支持 Promise API
• 拦截请求和响应

支持多种请求方式

• axios(config)
• axios.request(config)

• axios.get(url[,config])
• axios.delete(url[,config])

• axios.head(url[,config])
• axios.post(url,data[,config])

• axios.put(url,data[,config])
• axios.patch(url,data[,config])

安装

npm install axios --save

测试地址[老师的]

http://123.207.32.32:8000/home/multidata

简单使用

// 导入 axios
import axios from "axios";

// 使用
axios({
  url:'http://123.207.32.32:8000/home/multidata'
}).then(res => {
  console.log(res);
})

传递参数

(拼接URL后面)

axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res);
})

发送并发请求

/**
 * 发送多请求
 */
axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  })
]).then(res => {
  // 返回结果res是一个数组 [0] 就是第一个请求返回的结果 [1]...
  console.log(res);
})
axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  })
  // 可以通过 axios.spread展开返回结果
]).then(axios.spread((res1,res2) => {
  // 返回结果res是一个数组 [0] 就是第一个请求返回的结果 [1]...
  console.log(res1);
  console.log(res2);
}))

抽取默认配置

/**
 * 默认配置
 */
// 默认前缀URL
axios.defaults.baseURL = 'http://123.207.32.32:8000'
// 超时时间 单位:毫秒
axios.defaults.timeout = 5000

/**
 * 简单使用
 */
axios({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
})

常见的配置

• 请求地址

• url:'/user'

• 请求类型

• method:'get'

• 请求路径

• baseURL:'https://www.baidu.com'

• 请求前的数据处理

• transformRequest:[function(data){}]

• 请求后的数据处理

• transformResponse:[function(data){}]

• 自定义的请求头

• headers:{'x-Requested-With':'XMLHttpRequest'},

• URL查询对象

• params:{id:12}

• 查询对象序列化函数

• paramsSerializer:function(params){}

• request body

• data:{key:'aa'}

• 超时设置s

• timeout : 1000

• 跨域是否携带Token

• withCredentials:false

• 自定义请求处理

• adapter:function(resolve,reject,config){}

• 身份验证信息

• auth:{uname:'彼岸舞',pwd:'111'}

• 响应的数据格式

• json | blob | document | arraybuffer | text | stream
• responseType : 'json'

创建对应的Axios的实例

let config = {
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
};
let axiosInstance = axios.create(config);
axiosInstance({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
})

拦截器

let config = {
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
};
let axiosInstance = axios.create(config);

// 请求拦截器
axiosInstance.interceptors.request.use(
  // 拦截请求时的 config
  config => {
    console.log(config);
    return config;
  },
  // 拦截请求失败的error 一般请求不会失败的
  error => {

  }
)
// 响应拦截器
axiosInstance.interceptors.response.use(
  // 请求返回的数据
  res => {
    console.log(res);
    // 做数据过滤 只返回后端返回的data
    return res.data;
  },
  // 请求失败的error
  error => {
    console.log(error);
  }
)