axios

参数

axios({config}) axios的参数为一个对象

Javascript

axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  method: 'GET'  // POST
})
.then(res => {
  console.log(res)
})

简写

Code

axios.get(url,params)

Code

axios.post(url,params)

发送请求

并发请求

使用axios.all，可以放入多个请求的数组

axios.all([])返回的结果为一个数组，使用axios.spread可以将数组展开

Javascript

axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata',
}),axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})])
.then(res=>{
  console.log(res)        //[{..},{..}]
})

//使用axios可以将数组展开
.then(axios.spread((res1,res2)=>{
  console.log(res1)     //{...}
  console.log(res2)     //{...}
}))

配置相关信息

公共根url配置

Code

axios.defaults.baseURL = 'http....'

公共配置时间

Code

axios.defaults.timeout = 毫秒

创建axios实例

上面的都是全局配置，肯定不安全。

Javascript

const intance1 = axios.create({
	baseURL: 'http://123.207.32.32:8000',
	timeout: 5000
})

instance1({
	url: '/home/'，
	
})

封装axios

封装一个axios为一个函数

Javascript

import axios from 'axios'

export function request(config){
  const intance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  return intance(config)
}

组件中使用，导入request

Javascript

import {request} from '......'

request({

	url: '...',

    params: {}

})

.then(res=>{})

.catch()

不过我认为挂载在vue的原型中比较好理解

原型挂载

根目录中创建http.js

Javascript

import axios from 'axios'

const http = axios.create({
  baseURL: 'http://123.207.32.32:8000',
})

export default http

main.js

Javascript

import http from './http'

Vue.prototype.$http = http

组件中使用

Javascript

async fethA(){
      const res = await this.$http({
        url: '/home/multidata',
        params: {
            
        }
      })
      console.log(res)
    }

拦截器

请求拦截

Javascript

// 请求拦截  
// 请求成功拦截，请求失败拦截
http.interceptors.request.use(config=>{
  console.log(config)
  return config
},err=>{
  console.log(err)
})

需要注意，请求拦截成功之后，必须return ，不然其他请求则会获取不到数据。发生报错，。

使用场景：

更改header(config中不符合服务器配置)
网络请求显示动画
某些网络请求携带（token），必须携带一些特殊信息

响应拦截

这里可以做登录验证成功，失败，给出提示信息

Javascript

// 响应拦截  成功，失败
http.interceptors.response.use(result=>{
  return result.data   //可以只返回result中的data，才是有效数据
},err=>{
  console.log(err)
})

拦截之后处理完数据。一定要返回，要不然请求/响应都获取不到