axios

Axios

基于http库，可以用在node.js与浏览器中
是一个第三方请求的工具

axios官网

安装

npm i axios

格式

axios({
	 // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default
 // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
   // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345 //get携带的参数
  },
  // post请求的参数
  data:{}，
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
})

或者

axios.get('url',{'params携带的参数写于此':''})

axios的实例

可以使用实例来发送请求，为拦截器进行服务。

 let instance = axios.create({
      baseURL: 'BASEURL',
      timeout: 5000,
      header: {
        'Auth': '123'
      }

    })
      instance.post('/user/login',{
      username: 'admin1',
      password: '123321',
    }).then(res => {
      console.log(res);
    });

配置默认项

给axios配置配置默认项，能在全局默认了使用该配置
主要用于配置全局路径以及超时配置

 axios.defaults.baseURL = 'BASEURL'
    axios.post('/user/login',{
      username: 'admin1',
      password: '123321',
    }).then(res => {
      console.log(res);
    });

请求拦截器 interceptors

有请求成功的拦截器，以及请求失败的拦截器，每个请求在发送之前都会遇到这个拦截器。

   axios.interceptors.request.use(config =>{
      // 在请求之前做一些什么事情
      if(config.url!='/user/login'){
        // 如果请求的路径登录，那么就携带token
        config.header.Authorization = '123'
      }
      return config;
    },error =>{
      // 请求失败
      return Promise.reject(error)
    })

响应拦截器

 axios.interceptors.response.use(response =>{
      // 返回后端的数据
      let res = response.data;
      return res;
    },error =>{
      // 响应失败
      return Promise.reject(error)
    })

axios在vue脚手架里面的二次封装

import axios from 'axios'
import qs from 'qs'

// 创建axios的实例对象

let instance = axios.create({
  baseURL: 'http://129.199.0.35:8888',
  timeout: 5000,

})

// 请求拦截器
instance.interceptors.request.use(config => {
  console.log(config);
  return config
}, error => {

  return Promise.reject(error);
})

// 响应拦截器,对后端返回的数据进行拦截
instance.interceptors.response.use(response => {
let res = response.data;
  return res;
}, error => {
  return Promise.reject(error)
})

// 封装get方法
export function get (url, params) {
  return instance.get(url, {
    params
  })
}

// 封装post方法，封装一个json格式的
export function postJSON (url, data) {
  return instance.post(url, data, {})
}

// 封装post的表单格式的数据
export function post (url, data) {
  return instance.post(url, qs.stringify(data))
}

export default instance

axios的并发

all

返回的顺序与发送请求的顺序一样。
spread处理请求成功之后处理各个请求的数据

 axios.all([
      axios.get('http://121.199.0.35:8888/index/article/pageQuery', {
        page: 1,
        pageSize: 10
      }),
      axios.get('http://121.199.0.35:8888/index/carousel/findAll'),
      axios.post('http://121.199.0.35:8888/user/login')
    ]).then(res=>{
      console.log(res[0],res[1],res[2]); //三个数据
    })

ajax 与 axios的区别

1.ajax的特点：
	1.异步的XML和JavaScript 
	2.可以运行浏览器 不可以运行在node
	3.发送给后台数据需要手动转换 请求头手动设置
	4.后端响应的数据需要自己转换/json格式
2.axios的特点
	1. 基于 promise的http库
	2. 可以调用promise的api
	3. axios默认发送的是json格式的，和get请求
	4. axios请求发送的数据格式会自动转换
	5. axios会将响应的数据进行封装，一般会封装成一个对象 { config,header,data{}... } ,响应的数据在data里面。
	6. 是基于promise与ajax的封装。