axios的基本使用

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

安装

npm安装

$ npm install axios --save

通过cdn引入

请求方式

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

example：

//发送get请求演示
//1.没有请求参数
axios.get(url)
  .then(res => {
    console.log(res)
}) .catch(err => {
    console.log(err)
})

//2.有请求参数
axios.get(url,{params:{type:'sell',page:'1'}})
  .then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

//发送Post请求
axios.post(url,{})
  .then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

//执行多个并发请求
//有时候, 我们可能需求同时发送两个请求
//使用axios.all, 可以放入多个请求的数组.
//axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

axios.all([axios.get(url1,{params:{data}}),axios.get(url2),{params:{data}}])
  .then(axios.spread((res1,res2) => {
    console.log(res1)
    console.log(res2)
}))

拦截器

//（instance本质是一个promise对象）
const instance = axios.create({
    baseURL: '',
    timeout: 5000,
    headers: ''
  })
  // 拦截器
  // 1请求拦截
  instance.interceptors.request.use(config => {
    //请求成功时拦截，进行一些处理
     console.log(config)
    //处理完成后一定要return出去
    return config
  },error => {
    console.log(error)
  })
  //2响应拦截
  instance.interceptors.response.use(res => {
     console.log(res)
    // return res
    //因为一般来说响应的res中只有data是我们比较关心的，其他的都不怎么需要，所以我们只需要data数据
    console.log(res)
    return res.data
  },error => {
    console.log(error)
  })

常见的配置选项

• 请求根路径：baseURL: 'http:www.baidu.com'，
• 请求地址：url: '/user'，
• 请求类型： method: 'get/post'，
• 自定义请求头： headers: '{'x-Requested-With':'XMLHttpRequest'}'，
• url查询对象： params: {id:1}，
• 请求前的数据处理： transformRequest:[function(data){}]，
• 请求后的数据处理： transformResponse: [function(data){}]，
• 超时设置（毫秒）： timeout: 1000，
• 跨域是否带Token： withCredentials: false，
• 身份验证信息： auth: { uname: '', pwd: '12'}，
• 响应的数据格式（ json / blob /document /arraybuffer / text / stream）：responseType: 'json'，

axios的封装

import axios from 'axios'

export default function axiosDemo (option) {
  //1.创建axios案例
  const instance = axios.create({
    baseURL: 'http://106.54.54.237:8000/api/v1',
    timeout: 5000,
    headers: ''
  })
  // 2.拦截器
  // 2.1请求拦截
  instance.interceptors.request.use(config => {
    //请求成功时拦截，进行一些处理
    // console.log(config)
    //处理完成后一定要return出去
    return config
  },error => {
    console.log(error)
  })
  //2.2响应拦截
  instance.interceptors.response.use(res => {
    // console.log(res)
    // return res
    //因为一般来说响应的res中只有data是我们比较关心的，其他的都不怎么需要，所以我们只需要data数据
    console.log(res)
    return res.data
  },error => {
    console.log(error)
  })

  //3.return axios案例 （instance本质是一个promise对象）
  return instance(option)
}

在其他文件调用

import axios from './axios'

export  function getHomeMultiData() {
  return axios({
    url: '/home/multidata'
  })
}

export function getHomeGoods(type, page) {
  return axios({
    url: '/home/data',
    params: {
      type,
      page
    }
  })
}

参考文章：coderwhy（网络模块封装）