本文共 2916 字，大约阅读时间需要 9 分钟。

axios请求方法

1. get请求：获取数据 2个参数 url,config

axios.get('/index.json',{
   params:{
   id:12}}).then((res)=>{
   console.log(res)})axios({
   method:'get',url:'/index.json',params:{
   id:12}}).then((res)=>{
   console.log(res)})

2. post请求：发送数据 3个参数 url,data,config

• application/json 请求：

axios.post('/index.json', {
   id:12}).then((res)=>{
   console.log(res)})	axios({
   method:'post',url:'/index.json',data:{
   id:12}})

• form-data 请求：

let data = {
   id:12}let formData = new FormData();for(let key in data){
    formData.append(key,data[key])}axios.post('/index.json',formData)

3. put请求：修改数据，将所有数据提交到后台
4. patch请求：修改数据，将修改的数据提交到后台
   post,put ,patch请求的区别只是请求类型不同
5. delete请求：删除数据 2个参数 url,config
   url中传递参数query：axios.delete('/index.json',{params:{id:12}})
   请求体中传参 request payload：axios.delete('/index.json',{data:{id:12}})

并发请求：同时进行多个请求，统一处理请求数据

• axios.all();
• axios.spread();

axios.all([axios.get('/index.json'),axios.get('/city.json')]) // 相对路径，相对于baseURL	.then(axios.spread((indexRes,cityRes)=>{
   console.log(indexRes,cityRes)}))

axios实例

当只要一种后端语言时，可以直接使用axios请求数据（其实使用的是默认创建的axios实例）

创建：

axios.create({
   //实例的配置参数：	baseURL:'',//设置请求域名	timeout: ,//设置请求的超时时长，单位ms；一般由后端定义	url:'',	method:'',	headers:{
   },//请求头	params:{
   },data:{
   }})

使用axios实例请求数据：

axios实例.get('/data.json')  //将axios改为axios实例名称

配置

• axios全局配置：axios.default.timeout = xx
• axios实例配置：
  axios.create()//没有config参数时，默认使用全局配置
  修改实例配置：axios实例.default.timeout = xx
• axios请求配置: axios实例.get('/data.json',{timeout:5000})

拦截器:请求拦截器和响应拦截器

一般给axios实例添加拦截器，添加属性；直接使用axios会造成全局污染

axios实例.interceptors.request.use(//请求前的回调函数	config=>{
   		//发送请求前修改一些配置或弹出一些内容		config.headers.token = ''return config},//请求错误的回调函数	err=>{
    //请求错误：发送请求没有到达后端，返回404 not found 401请求超时return Promise.reject(err)})

axios实例.interceptors.request.use(	config=>{
   		//请求成功对响应数据做处理 return config},	err=>{
    //响应错误：eg 查询不到数据，返回500系统错误  502系统重启return Promise.reject(err)})

请求错误与相应错误的区分：是否到达后端

取消拦截器（了解）

axios.interceptors.request.eject(拦截器变量名)axios.interceptors.response.eject(拦截器变量名)

错误处理：一般在拦截器的err回调中添加统一的错误处理；特殊的处理添加到axios.get().catch()中

应用：登录之后才能评论（访问评论接口），对未登录的用户进行请求拦截

token:一个编码的字符串包含加密后的用户个人信息，用来识别登录的用户身份

一把token放在请求头headers中

取消请求（了解）

let source = axios.CancelToken.source();//生成source对象axios.get('/data.json',{
   cancelToken:source.token})source.cancel('cancel http');//取消请求，可选参数：message取消信息。

封装

1. 创建API管理文件contactAPI.js:将所有请求接口（url,method）放入一个对象（常量）中,导出

// API方法管理文件const CONTACT_API = {
       // 获取联系人列表    getContactList:{
           method:'get',        url:'/contactList'    },    // 添加联系人    AddContactListJson:{
           method:'post',        url:'/contact/new/json'},……export default CONTACT_API}

2. 封装axios到http.js中，循环遍历导出的对象常量，将所有方法（请求接口）放到一个容器http对象（key:方法；value:promise对象）中。
3. 统一请求格式/参数
4. 添加拦截器
   添加请求拦截器，请求之前 加载中…，返回请求结果
   添加响应拦截器，响应完成 清除 加载中… ,返回请求数据
5. 导出http对象。main.js中导入，将http挂载到vue原型上

Vue.prototype.$http=http;

7. 应用；async function(){ this.$http.方法名(参数列表)}

转载地址：https://blog.csdn.net/Conradine_Lian/article/details/107234728 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！