Axios学习

推荐: — axios中文官方文档 —

1. 什么是axios?
   Axios是一个基于promise的HTTP库, 可以用在浏览器和node.js中

2. 基本使用
   安装

npm install axios

基本用例

import axios from 'axios'
// 默认get请求
axios('http://123.207.32.32:8000/user/12345')
// 执行Get请求
const url = 'http://123.207.32.32:8000/user?ID=12345'
axios.get('url').then(res => {
   
  console.log(res)
}).catch(err => {
   
  console.log(err)
})
// 上面get请求也可以这样做
axios.get('http://123.207.32.32:8000/user', {
   
  params: {
   
    ID: 12345
  }
}).then(res => {
   
  console.log(res)
}).catch(err => {
   
  console.log(err)
})
//执行post请求
axios.post('http://123.207.32.32:8000/user', {
   
  firstName: 'Fired',
  lastName: 'Flintstone'
}).then(res => {
   
  console.log(res)
}).catch(err => {
   
  console.log(err)
})
//也可以这样
axios({
   
  url: 'http://123.207.32.32:8000/user/12345',
  method: 'post',
  data: {
   
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//axios.all(itemable),axios.spread(callback)执行多个并发请求
const getUserAccount = () => {
   
  return axios.get('http://123.207.32.32:8000/user/12345')
}

const getUserPermissions = () => {
   
  return axios.get('http://123.207.32.32:8000/user/permissions', {
   
    params: {
   
      ID: 12345
    }
  })
} 
// axios.all([config1,config2]).then(axios.spread((res1,res2) => {}))
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((res1, res2) => { console.log(res1) console.log(res2) }))
// axios.all() 可以同时进行多个并发请求
// axios.spread() 可以将多个返回进行拆分

3. 创建实例

const instance = axios.create({
   
  baseURL: 'http://123.207.32.32:8000',  //基本url,用于url重复部分
  timeout: 1000,  //请求超时设定,单位毫秒
})

instance('/home/multidata').then(res => {
   
  console.log(res)
})

4. 拦截器
   在请求或相应被 then 或 catch 处理前拦截它们

// 请求拦截器
axios.interceptors.request.use(config => {
   
  //在请求之前的处理
  //处理完成后必须返回config
  return config
}, err => {
   
  // 请求错误时的处理
  return Promise.reject(error)
})

//响应拦截器
axios.interceptors.request.use(response=> {
   
  //对于相应返回的处理
  return response
}, err => {
   
  //响应错误时的处理
  return Promise.reject(err)
})

5. 封装request 模块

在真实的项目开发过程中,一般讲axios单独做为项目中一个模块
在src中新建utils文件夹,新建request.js文件
request.js

import axios from 'axios'

const request = config => {
   
  //创建axios实例
  const instance = axios.create({
   
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  });
  //请求拦截器
  instance.interceptors.request.use(config => {
   
     console.log(config)
     return config
  }, err => {
   
     console.log(err)
  })
  //响应拦截器
  instance.interceptors.response.use(response => {
   
     console.log(response)
     return response
  },err => {
   
    console.log(err)
  })
}

export default request

其他子文件request引用

import request from '@/utils/request'
const getUserAccount = (data) => {
   
  let url = ''
  for(let key in data){
   
   if(data[key] != '' && data[key] != null){
   
     url = url + '&' + key + '=' + encodeURIComponent(data[key])
   }
  }
  return request.get(`/user/permissions?${
    url}`)
}
export getUserAccount