Vue学习-axios

Posted 2020-12-12 软件技术开发

目录

• 功能特点
• 安装
• 请求方式
  • axios(config)
  • axios.request(config)
  • axios.get(url[,config])
  • axios.delete(url[,config])
  • axios.head(url[,config])
  • axios.post(url[,config])
  • axios.put(url[,config])
  • axios.patch(url[,config])
  • axios.all()并发请求
• 拦截器

功能特点

• 在浏览器中发送XMLHttpRequests请求
• 在node.js 中发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据

安装

npm install axios --save

请求方式

axios(config)

axios.request(config)

axios.get(url[,config])

import axios from ‘axios‘

//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)});

axios.delete(url[,config])

axios.head(url[,config])

axios.post(url[,config])

axios.put(url[,config])

axios.patch(url[,config])

axios.all()并发请求

axios.all([axios({url:‘url‘}),axios({url:‘url‘})])
     .then(results=>{  //results是一个数组，results[0]是第一个回调的结果;results[1]是第二个回调的结果;
            var result1=results[0]
            var result2=results[1]
      })

//axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开(spread)为res1,res2
axios.all([axios({url:‘url‘}),axios({url:‘url‘})])
     .then(axios.spread((res1,res2)=>{
            console.log(res1)
            console.log(res2)
      }))

拦截器

• 4个拦截（请求成功，请求失败，响应成功，响应失败）

const instance=axios.create({baseURL:‘‘,timeout:5000});

instance.interceptors.request.use(config=>{
      console.log(‘request 成功‘);
      return config;
}
,err=>{
      console.log(‘request 失败‘);
      return err;
})

instance.interceptors.response.use(response=>{
      console.log(‘response 成功‘);
      return response.data;
}
,err=>{
      console.log(‘response 失败‘);
      return err;
})