首页 文章 精选 留言 我的

细谈Axios中那些不为人知的秘密！一文读懂Axios

2021-09-29 408

​

 Axios介绍

1、Axios是什么？

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

2、Axios特性

（1）支持Promise API

（2）拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。

（3）转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。

（4）取消请求

（5）自动转换JSON数据

（6）客户端支持防御XSRF

3、浏览器支持情况

Firefox、Chrome、Safari、Opera、Edge、IE8+。

Axios基本使用

yarn add axios

import axios from "axios"
axios.get("/data.json").then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

打开控制台瞅两眼，已经有数据了 

axios是否使用成功了​

Axios常用请求方法

方法列举：get, post, put, patch, delete等。

  • get：一般用户获取数据
  • post：一般用于表单提交与文件上传
  • patch：更新数据（只将修改的数据推送到后端）
  • put：更新数据（所有数据推送到服务端）
  • delete：删除数据

备注：post一般用于新建数据，put一般用于更新数据，patch一般用于数据量较大的时候的数据更新。

1、get方法

方式一

axios
      .get("/data.json", { 
        params: { 
          id: 12
        }
      })
      .then(res => { 
        console.log(res);
      })
      .catch(err => { 
        console.log(err);
      });

方式二

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

带有参数后get请求实际是http://xxxxx/data.json?id=12，写了这么多结果就是url加了参数。

浏览器控制台相关信息介绍：

  1. Request URL：请求URL
  2. Request Method：请求方式

2、post方法

post请求常用的数据请求格式有两种：

1.form-data（常用于表单提交（图片上传、文件上传））

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

注意：请求地址Request URL: http://xxxxxxx/data.json，

请求头中Content-Type: multipart/form-data; boundary=——WebKitFormBoundarydgohzXGsZdFwS16Y

参数形式：id:12

2.application/json（常用）

方式一

let data = {

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

方式二

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

注意：请求地址Request URL: http://xxxxxxxx/data.json，

请求头中Content-Type: application/json;charset=UTF-8

参数形式：{ id:12 }

3、put方法

let data = { 
    id: 12
};
axios.put("/data.json", data).then(res=>{ 
    console.log(res, 'put')
});

4、patch方法

let data = { 
  id: 12
};
axios.patch("/data.json", data).then(res=>{ 
  console.log(res, 'patch')
});

5、delete方法

方式一：params

axios
      .delete("/data.json", { 
        params: { 
          id: 12
        }
      })
      .then(res => { 
        console.log(res, "delete");
      });
let params = { 
      id: 12
    };
    axios({ 
      method:'delete',
      url:'/data.json',
      params:params
    }).then(res=>{ 
      console.log(res)
    })

方式二：data

axios
      .delete("/data.json", { 
        data: { 
          id: 12
        }
      })
      .then(res => { 
        console.log(res, "delete");
      });
let data = { 
      id: 12
    };
    axios({ 
      method:'delete',
      url:'/data.json',
      data:data
    }).then(res=>{ 
      console.log(res)
    })

注意：params方式会将请求参数拼接在URL上面，Request URL: http://xxxxxxxx/data.json?id=12

参数形式：id:12

Content-Type: text/html; charset=utf-8

data方式不会讲参数拼接，是直接放置在请求体中的，Request URL: http://xxxxxxxx/data.json

参数形式：{id:12}

Content-Type: application/json;charset=UTF-8

总结：上述方法中均对应两种写法：（1）使用别名：形如axios.get()；（2）不使用别名形如axios()；

6、并发请求

并发请求，就是同时进行多个请求，并统一处理返回值。类似promise.all。

在下面例子中，我们使用axios.all，对data.json/city.json同时进行请求，使用axios.spread，对返回的结果分别进行处理。代码如下：

// 并发请求
axios.all([axios.get("/data.json"), axios.get("/city.json")]).then(
   axios.spread((dataRes, cityRes) => { 
        console.log(dataRes, cityRes);
   })
);

注意：axios.all的参数是请求函数的数组，在对应的回调then中，调用axios.spead对返回值进行处理，即可。

并发请求的应用场景：需要同时进行多个请求，并且需要同时处理接口调用的返回值的时候，我们可以使用并发请求。

Axio实例

1、axios实例的创建

比如：后端接口地址有多个（www.test.com、www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们可以创建实例。

思路如下：创建多个实例，配置不同的超时时长，用不同的实例去请求不同的接口。使用axios.acreate来创建实例，配置相关信息，进行网络请求。代码如下：

// 实例1
let instance = axios.create({ 
  baseURL:'http://loacalhost:8080',
  timeout:1000
})
instance.get('/data.json').then(res=>{ 
  console.log(res)
})
//实例2
let instance2 = axios.create({ 
  baseURL: "http://loacalhost:8081",
  timeout: 2000
});
instance2.get("/city.json").then(res => { 
  console.log(res);
});

备注：此时我们就可以访问http://loacalhost:8080与http://loacalhost:8081两个不同域名的接口，并且使用不同的配置。

2、axios实例的相关配置

（1）配置列表

  • baseURL：请求的域名（基本地址）。

  • timeout：请求的超时时长，超出后后端返回401。

    备注：一般由后端定义，后端的接口需要的处理时长较长的时候，如果请求的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，可以及时释放掉。

  • url：请求路径。

  • method：请求方法。如：get、post、put、patch、delete等。

  • headers：请求头。

  • params：将请求参数拼接到url上

  • data：将请求参数放置到请求体里 

axios.create({
    baseURL:'', //请求的域名（基本地址）
    timeout:2000, //请求的超时时长，单位毫秒，默认。
    url:'/data.json', //请求路径
    method:'get', //请求方法
    headers:{ 
        token:''
    }, //设置请求头
    params:{ 
    },//将请求参数拼接到url上
    data:{ 
    }, //将请求参数放置到请求体里
});

（2）三种配置方式

  • axios全局配置
axios.defaults.baseURL = ‘http://localhost:8080‘

axios.defaults.timeout = 2000
  •  axios实例配置
let instance = axios.create();

instance.defaults.timeout = 3000
  • axios请求配置
instance.get(‘/data.json’,{

    timeout:5000
})

优先级：axios全局配置 < axios实例配置 < axios请求配置

3、常用参数配置的使用方法

举例1：

let instance1 = axios.create({ 
        baseURL:'http://localhost:9090',
        timeout:1000
    })
    instance1.get("/contactList",{ 
        params:{ 
            id:10
        }
    }).then(res=>{ 
        console.log(res)
    })

分析：配置的参数为baseURL：‘http://localhost:9090’，timeout:1000，method:‘get’，params:{ id:10}，url:’/contactList’

举例2：

let instance2 = axios.create({ 
        baseURL:'http://localhost:9091',
        timeout:3000
    })
    instance2.get("/contactList",{ 
        timeout:5000
    }).then(res=>{ 
        console.log(res)
    })

分析：配置的参数为baseURL：‘http://localhost:9091’，timeout:5000，method:‘get’，url:’/contactList’

注意：最终的有效配置是由优先级高的覆盖优先级低的。

Axios拦截器、错误处理与取消请求

1、拦截器

什么是拦截器？

在请求前或响应被处理前拦截他们，分为两种：请求拦截器与响应拦截器。

拦截器的使用方法

请求拦截器

// 请求拦截器

axios.interceptors.request.use(config => { 
  // 在发送请求前做些什么
  return config;
}, err=>{ 
    // 在请求错误的时候的逻辑处理
    return Promise.reject(err)
});

响应拦截器

// 响应拦截器

axios.interceptors.response.use(res => { 
  // 在请求成功后的数据处理
  return res;
}, err=>{ 
    // 在响应错误的时候的逻辑处理
    return Promise.reject(err)
});

取消拦截器

let inter = axios.interceptors.request.use(config=>{

    config.header={ 
        auth:true
    }
    return config
})
axios.interceptors.request.eject(inter)

实用举例A：登录权限

需要token的接口实例

let instance = axios.create({ });
instance.interceptors.request.use(config=>{ 
    config.headers.token = '';
    return config
})

不需要token的接口实例

let newInstance = axios.create({ });

实用举例B：移动端开发数据加载loading动画

// 请求的加载动画loading
let instance_phone = axios.create({ });
instance_phone.interceptors.request.use(config=>{ 
    $('#loading').show();
    return config
})
instance_phone.interceptors.response.use(res=>{ 
    $('#loading').hide();
    return res
})

备注：实现的效果是请求数据的时候显示loading动画，数据响应后隐藏loading动画。

2、错误处理，拦截

结合请求拦截器与响应拦截器来说，不管是请求错误还是响应错误，都会执行catch方法。

// 请求拦截器
    axios.interceptors.request.use(
      config => { 
        // 在发送请求前做些什么
        return config;
      },
      err => { 
        // 在请求错误的时候的逻辑处理
        return Promise.reject(err);
      }
    );
    // 响应拦截器
    axios.interceptors.response.use(
      res => { 
        // 在请求成功后的数据处理
        return res;
      },
      err => { 
        // 在响应错误的时候的逻辑处理
        return Promise.reject(err);
      }
    ); 
        axios
      .get("data.json")
      .then(res => { 
        console.log(res);
      })
      .catch(err => { 
        console.log(res);
      });

错误处理举例

在实际开发中，不会再每次网络请求的时候，使用catch方法，可以添加统一的错误处理方法。代码如下：

// 请求错误处理
    let instance = axios.create({ });
    instance.interceptors.request.use(
      config => { 
        return config;
      },
      err => { 
        // 请求错误的常见状态码：4XX 401-请求超时 404-mot found
        $("#error").show();
        setTimeout(()=>{ 
           $("#error").hide(); 
        }, 2000)
        return Promise.reject(err);
      }
    );
    // 响应错误处理
    instance.interceptors.response.use(
      res => { 
        return res;
      },
      err => { 
        // 响应错误的常见状态码 5XX 500-服务器错误 502-服务器重启
        $("#error").show();
        setTimeout(()=>{ 
           $("#error").hide(); 
        }, 2000)
        return Promise.reject(err);
      }
    );
    instance.get("/data.json").then(res=>{ 
        console.log(res,'请求成功')
    }).catch(err=>{ 
        console.log(err,'除了拦截器设置的处理之外的其他处理')
    })

思路分析：首先创建实例，给实例设置请求拦截器与响应拦截器。

  • （1）请求错误的常见状态码以4开头，如401-请求超时、404-接口未找到；
  • （2）响应错误的常见状态码以5开头，如500-服务器错误、502-服务器重启等。
  • （3）处理设置请求拦截器与响应拦截器的操作外，如果还要其他操作，我们可以在请求的时候，在使用catch方法。

3、取消请求（不常用） 

let source = axios.CancelToken.source();

axios
  .get("/data.json", { 
    cancelToken: source.token
  })
  .then(res => { 
    console.log(res);
  }).catch(err=>{ 
      console.log(err)
  })
// 取消请求(参数msg)
  source.cancel('自定的的字符串可选')

应用场景

在查询数据的时候，很长时间（3-5s）仍未获取数据，这个时候需要取消请求。

​

 axios请求的封装与使用

思路分析

axios 请求的封装，无非是为了方便代码管理，我们可以使用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装一个方法，专门用于数据交互。

第一步：新建 src/service/contactApi.js 文件

const CONTACT_API = { 
    // 获取联系人列表
    getContactList:{ 
        method:'get',
        url:'/contactList'
    },
    // 新建联系人 form-data
    newContactForm:{ 
        method:'post',
        url:'/contact/new/form'
    },
    // 新建联系人 application/json
    newContactJson:{ 
        method:'post',
        url:'/contact/new/json'
    },
    // 编辑联系人
    editContact:{ 
        method:'put',
        url:'/contact/edit'
    },
    // 删除联系人
    delContact:{ 
        method:'delete',
        url:'/contact'
    }
}
export default CONTACT_API

备注：该文件的用途只有一个，定义不同的接口请求信息（包含 method、url等）并导出使用。当接口增加或者删除的时候，只需要定义在该文件中即可。

第二步：新建 src/service/http.js 文件

import axios from 'axios'
import service from './contactApi'
import {  Toast } from 'vant'
// service 循环遍历输出不同的请求方法
let instance = axios.create({ 
    baseURL: 'http://localhost:9000/api',
    timeout: 1000
})
const Http = { }; // 包裹请求方法的容器
// 请求格式/参数的统一
for (let key in service) { 
    let api = service[key]; // url method
    // async 作用：避免进入回调地狱
    Http[key] = async function(
        params, // 请求参数 get：url，put，post，patch（data），delete：url
        isFormData = false, // 标识是否是form-data请求
        config = { } // 配置参数
    ) { 
        let newParams = { }
        // content-type是否是form-data的判断
        if (params && isFormData) { 
            newParams = new FormData()
            for (let i in params) { 
                newParams.append(i, params[i])
            }
        } else { 
            newParams = params
        }
        // 不同请求的判断
        let response = { }; // 请求的返回值
        if (api.method === 'put' || api.method === 'post' || api.method === 'patch') { 
            try { 
                response = await instance[api.method](api.url, newParams, config)
            } catch (err) { 
                response = err
            }
        } else if (api.method === 'delete' || api.method === 'get') { 
            config.params = newParams
            try { 
                response = await instance[api.method](api.url, config)
            } catch (err) { 
                response = err
            }
        }
        return response; // 返回响应值
    }
}
// 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config => { 
        // 发起请求前做些什么
        Toast.loading({ 
            mask: false,
            duration: 0, // 一直存在
            forbidClick: true, // 禁止点击
            message: '加载中...'
        })
        return config
    }, () => { 
        // 请求错误
        Toast.clear()
        Toast('请求错误，请求稍后重试')
    })
    // 响应拦截器
instance.interceptors.response.use(res => { 
    // 请求成功
    Toast.clear()
    return res.data
}, () => { 
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})
export default Http

具体的思路步骤如下：

首先，我们引入contactApi.js文件，别名定义为 service。

import service from './contactApi'

 定义新的 axios 实例，针对当前功能模块联系人列表管理 contactList ，配置baseURL基础域名、timeout请求超时时间等等，区别于其他功能模块。

let instance = axios.create({ 
    baseURL: 'http://localhost:9000/api',
    timeout: 1000
})

定义 http 作为请求方法的容器，配置对应的参数(即请求方法中的其他信息，比如 headers，content-type，token等等)。需要注意的是，在其中我们要区分 content-type的形式有两种：form-data 与 application/json，它们的参数配置不同，form-data 形式的参数，我们需要定义 Formdata 对象。具体如下：

let newParams = { }
// content-type是否是form-data的判断
if (params && isFormData) { 
    newParams = new FormData()
    for (let i in params) { 
        newParams.append(i, params[i])
    }
} else { 
    newParams = params
}

温馨提示：其中 isFormData 定义为 Boolean 变量，用于标识是否为 FormData 形式。

根据不同的请求方式，发起网络请求，并导出返回值。

// 不同请求的判断
let response = { }; // 请求的返回值
if (api.method === 'put' || api.method === 'post' || api.method === 'patch') { 
    try { 
        response = await instance[api.method](api.url, newParams, config)
    } catch (err) { 
        response = err
    }
} else if (api.method === 'delete' || api.method === 'get') { 
    config.params = newParams
    try { 
        response = await instance[api.method](api.url, config)
    } catch (err) { 
        response = err
    }
}
return response; // 返回响应值

注意：对于不同方法的区别在于：get 与 delete 的参数在 config 中配置，而不是使用 params 。

设置请求拦截器与响应拦截器

/ 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config => { 
        // 发起请求前做些什么
        Toast.loading({ 
            mask: false,
            duration: 0, // 一直存在
            forbidClick: true, // 禁止点击
            message: '加载中...'
        })
        return config
    }, () => { 
        // 请求错误
        Toast.clear()
        Toast('请求错误，请求稍后重试')
    })
    // 响应拦截器
instance.interceptors.response.use(res => { 
    // 请求成功
    Toast.clear()
    return res.data
}, () => { 
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})

 导出src/service/http.js文件，用于其他地方的引入。

export default Http

第三步：在入口文件中导入 http.js ，并挂载到 vue 原型上。

import Http from './service/http'
// 把Http挂载到Vue实例上
Vue.prototype.$Http = Http

第四步：在组件中使用封装的请求

// 获取联系人列表
async getList(){ 
    let res = await this.$Http.getContactList()
    this.list = res.data
},

注意：在使用的时候，我们需要结合 async 与 await 才能正确使用。具体的使用方法是：

  1. 在定义的网络请求函数前增加 async 标识。
  2. 在接收请求返回数据的时候，增加 await 标识。
  3. 提示：在上面函数中，只有在 res 拿到后才会执行 this.list = res.data; 相当于在对应的 then 中执行的语句，避免了回调地狱。
  4. axios在提交表单请求时会自动设置content-type，此时手动设置时无效的。

总结

在进行项目开发的时候，我们需要对网络请求的方法进行封装，可以有效地减少后期代码维护的难度，建议开发者根据不同的功能模块进行拆分，方便后期代码问题的定位。另外，也能实现代码的低耦合，避免出现更多的重复代码。

​​

 axios请求的封装与使用

思路分析

axios 请求的封装，无非是为了方便代码管理，我们可以使用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装一个方法，专门用于数据交互。

第一步：新建 src/service/contactApi.js 文件

const CONTACT_API = { 
    // 获取联系人列表
    getContactList:{ 
        method:'get',
        url:'/contactList'
    },
    // 新建联系人 form-data
    newContactForm:{ 
        method:'post',
        url:'/contact/new/form'
    },
    // 新建联系人 application/json
    newContactJson:{ 
        method:'post',
        url:'/contact/new/json'
    },
    // 编辑联系人
    editContact:{ 
        method:'put',
        url:'/contact/edit'
    },
    // 删除联系人
    delContact:{ 
        method:'delete',
        url:'/contact'
    }
}
export default CONTACT_API

备注：该文件的用途只有一个，定义不同的接口请求信息（包含 method、url等）并导出使用。当接口增加或者删除的时候，只需要定义在该文件中即可。

第二步：新建 src/service/http.js 文件

import axios from 'axios'
import service from './contactApi'
import {  Toast } from 'vant'
// service 循环遍历输出不同的请求方法
let instance = axios.create({ 
    baseURL: 'http://localhost:9000/api',
    timeout: 1000
})
const Http = { }; // 包裹请求方法的容器
// 请求格式/参数的统一
for (let key in service) { 
    let api = service[key]; // url method
    // async 作用：避免进入回调地狱
    Http[key] = async function(
        params, // 请求参数 get：url，put，post，patch（data），delete：url
        isFormData = false, // 标识是否是form-data请求
        config = { } // 配置参数
    ) { 
        let newParams = { }
        // content-type是否是form-data的判断
        if (params && isFormData) { 
            newParams = new FormData()
            for (let i in params) { 
                newParams.append(i, params[i])
            }
        } else { 
            newParams = params
        }
        // 不同请求的判断
        let response = { }; // 请求的返回值
        if (api.method === 'put' || api.method === 'post' || api.method === 'patch') { 
            try { 
                response = await instance[api.method](api.url, newParams, config)
            } catch (err) { 
                response = err
            }
        } else if (api.method === 'delete' || api.method === 'get') { 
            config.params = newParams
            try { 
                response = await instance[api.method](api.url, config)
            } catch (err) { 
                response = err
            }
        }
        return response; // 返回响应值
    }
}
// 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config => { 
        // 发起请求前做些什么
        Toast.loading({ 
            mask: false,
            duration: 0, // 一直存在
            forbidClick: true, // 禁止点击
            message: '加载中...'
        })
        return config
    }, () => { 
        // 请求错误
        Toast.clear()
        Toast('请求错误，请求稍后重试')
    })
    // 响应拦截器
instance.interceptors.response.use(res => { 
    // 请求成功
    Toast.clear()
    return res.data
}, () => { 
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})
export default Http

具体的思路步骤如下：

首先，我们引入contactApi.js文件，别名定义为 service。

import service from './contactApi'

 定义新的 axios 实例，针对当前功能模块联系人列表管理 contactList ，配置baseURL基础域名、timeout请求超时时间等等，区别于其他功能模块。

let instance = axios.create({ 
    baseURL: 'http://localhost:9000/api',
    timeout: 1000
})

定义 http 作为请求方法的容器，配置对应的参数(即请求方法中的其他信息，比如 headers，content-type，token等等)。需要注意的是，在其中我们要区分 content-type的形式有两种：form-data 与 application/json，它们的参数配置不同，form-data 形式的参数，我们需要定义 Formdata 对象。具体如下：

let newParams = { }
// content-type是否是form-data的判断
if (params && isFormData) { 
    newParams = new FormData()
    for (let i in params) { 
        newParams.append(i, params[i])
    }
} else { 
    newParams = params
}

温馨提示：其中 isFormData 定义为 Boolean 变量，用于标识是否为 FormData 形式。

根据不同的请求方式，发起网络请求，并导出返回值。

// 不同请求的判断
let response = { }; // 请求的返回值
if (api.method === 'put' || api.method === 'post' || api.method === 'patch') { 
    try { 
        response = await instance[api.method](api.url, newParams, config)
    } catch (err) { 
        response = err
    }
} else if (api.method === 'delete' || api.method === 'get') { 
    config.params = newParams
    try { 
        response = await instance[api.method](api.url, config)
    } catch (err) { 
        response = err
    }
}
return response; // 返回响应值

注意：对于不同方法的区别在于：get 与 delete 的参数在 config 中配置，而不是使用 params 。

设置请求拦截器与响应拦截器

/ 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config => { 
        // 发起请求前做些什么
        Toast.loading({ 
            mask: false,
            duration: 0, // 一直存在
            forbidClick: true, // 禁止点击
            message: '加载中...'
        })
        return config
    }, () => { 
        // 请求错误
        Toast.clear()
        Toast('请求错误，请求稍后重试')
    })
    // 响应拦截器
instance.interceptors.response.use(res => { 
    // 请求成功
    Toast.clear()
    return res.data
}, () => { 
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})

 导出src/service/http.js文件，用于其他地方的引入。

export default Http

第三步：在入口文件中导入 http.js ，并挂载到 vue 原型上。

import Http from './service/http'
// 把Http挂载到Vue实例上
Vue.prototype.$Http = Http

第四步：在组件中使用封装的请求

// 获取联系人列表
async getList(){ 
    let res = await this.$Http.getContactList()
    this.list = res.data
},

注意：在使用的时候，我们需要结合 async 与 await 才能正确使用。具体的使用方法是：

  1. 在定义的网络请求函数前增加 async 标识。
  2. 在接收请求返回数据的时候，增加 await 标识。
  3. 提示：在上面函数中，只有在 res 拿到后才会执行 this.list = res.data; 相当于在对应的 then 中执行的语句，避免了回调地狱。
  4. axios在提交表单请求时会自动设置content-type，此时手动设置时无效的。

总结

在进行项目开发的时候，我们需要对网络请求的方法进行封装，可以有效地减少后期代码维护的难度，建议开发者根据不同的功能模块进行拆分，方便后期代码问题的定位。另外，也能实现代码的低耦合，避免出现更多的重复代码。

​

 axios请求的封装与使用

思路分析

axios 请求的封装，无非是为了方便代码管理，我们可以使用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装一个方法，专门用于数据交互。

第一步：新建 src/service/contactApi.js 文件

const CONTACT_API = { 
    // 获取联系人列表
    getContactList:{ 
        method:'get',
        url:'/contactList'
    },
    // 新建联系人 form-data
    newContactForm:{ 
        method:'post',
        url:'/contact/new/form'
    },
    // 新建联系人 application/json
    newContactJson:{ 
        method:'post',
        url:'/contact/new/json'
    },
    // 编辑联系人
    editContact:{ 
        method:'put',
        url:'/contact/edit'
    },
    // 删除联系人
    delContact:{ 
        method:'delete',
        url:'/contact'
    }
}
export default CONTACT_API

备注：该文件的用途只有一个，定义不同的接口请求信息（包含 method、url等）并导出使用。当接口增加或者删除的时候，只需要定义在该文件中即可。

第二步：新建 src/service/http.js 文件

import axios from 'axios'
import service from './contactApi'
import {  Toast } from 'vant'
// service 循环遍历输出不同的请求方法
let instance = axios.create({ 
    baseURL: 'http://localhost:9000/api',
    timeout: 1000
})
const Http = { }; // 包裹请求方法的容器
// 请求格式/参数的统一
for (let key in service) { 
    let api = service[key]; // url method
    // async 作用：避免进入回调地狱
    Http[key] = async function(
        params, // 请求参数 get：url，put，post，patch（data），delete：url
        isFormData = false, // 标识是否是form-data请求
        config = { } // 配置参数
    ) { 
        let newParams = { }
        // content-type是否是form-data的判断
        if (params && isFormData) { 
            newParams = new FormData()
            for (let i in params) { 
                newParams.append(i, params[i])
            }
        } else { 
            newParams = params
        }
        // 不同请求的判断
        let response = { }; // 请求的返回值
        if (api.method === 'put' || api.method === 'post' || api.method === 'patch') { 
            try { 
                response = await instance[api.method](api.url, newParams, config)
            } catch (err) { 
                response = err
            }
        } else if (api.method === 'delete' || api.method === 'get') { 
            config.params = newParams
            try { 
                response = await instance[api.method](api.url, config)
            } catch (err) { 
                response = err
            }
        }
        return response; // 返回响应值
    }
}
// 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config => { 
        // 发起请求前做些什么
        Toast.loading({ 
            mask: false,
            duration: 0, // 一直存在
            forbidClick: true, // 禁止点击
            message: '加载中...'
        })
        return config
    }, () => { 
        // 请求错误
        Toast.clear()
        Toast('请求错误，请求稍后重试')
    })
    // 响应拦截器
instance.interceptors.response.use(res => { 
    // 请求成功
    Toast.clear()
    return res.data
}, () => { 
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})
export default Http

具体的思路步骤如下：

​

 首先，我们引入contactApi.js文件，别名定义为 service。

import service from './contactApi'

 定义新的 axios 实例，针对当前功能模块联系人列表管理 contactList ，配置baseURL基础域名、timeout请求超时时间等等，区别于其他功能模块。

let instance = axios.create({ 
    baseURL: 'http://localhost:9000/api',
    timeout: 1000
})

定义 http 作为请求方法的容器，配置对应的参数(即请求方法中的其他信息，比如 headers，content-type，token等等)。需要注意的是，在其中我们要区分 content-type的形式有两种：form-data 与 application/json，它们的参数配置不同，form-data 形式的参数，我们需要定义 Formdata 对象。具体如下：

let newParams = { }
// content-type是否是form-data的判断
if (params && isFormData) { 
    newParams = new FormData()
    for (let i in params) { 
        newParams.append(i, params[i])
    }
} else { 
    newParams = params
}

温馨提示：其中 isFormData 定义为 Boolean 变量，用于标识是否为 FormData 形式。

根据不同的请求方式，发起网络请求，并导出返回值。

// 不同请求的判断
let response = { }; // 请求的返回值
if (api.method === 'put' || api.method === 'post' || api.method === 'patch') { 
    try { 
        response = await instance[api.method](api.url, newParams, config)
    } catch (err) { 
        response = err
    }
} else if (api.method === 'delete' || api.method === 'get') { 
    config.params = newParams
    try { 
        response = await instance[api.method](api.url, config)
    } catch (err) { 
        response = err
    }
}
return response; // 返回响应值

注意：对于不同方法的区别在于：get 与 delete 的参数在 config 中配置，而不是使用 params 。

设置请求拦截器与响应拦截器

/ 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config => { 
        // 发起请求前做些什么
        Toast.loading({ 
            mask: false,
            duration: 0, // 一直存在
            forbidClick: true, // 禁止点击
            message: '加载中...'
        })
        return config
    }, () => { 
        // 请求错误
        Toast.clear()
        Toast('请求错误，请求稍后重试')
    })
    // 响应拦截器
instance.interceptors.response.use(res => { 
    // 请求成功
    Toast.clear()
    return res.data
}, () => { 
    Toast.clear()
    Toast('请求错误，请求稍后重试')
})

 导出src/service/http.js文件，用于其他地方的引入。

export default Http

第三步：在入口文件中导入 http.js ，并挂载到 vue 原型上。

import Http from './service/http'
// 把Http挂载到Vue实例上
Vue.prototype.$Http = Http

第四步：在组件中使用封装的请求

// 获取联系人列表
async getList(){ 
    let res = await this.$Http.getContactList()
    this.list = res.data
},

注意：在使用的时候，我们需要结合 async 与 await 才能正确使用。具体的使用方法是：

  1. 在定义的网络请求函数前增加 async 标识。
  2. 在接收请求返回数据的时候，增加 await 标识。
  3. 提示：在上面函数中，只有在 res 拿到后才会执行 this.list = res.data; 相当于在对应的 then 中执行的语句，避免了回调地狱。
  4. axios在提交表单请求时会自动设置content-type，此时手动设置时无效的。

总结

在进行项目开发的时候，我们需要对网络请求的方法进行封装，可以有效地减少后期代码维护的难度，建议开发者根据不同的功能模块进行拆分，方便后期代码问题的定位。另外，也能实现代码的低耦合，避免出现更多的重复代码。

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://my.oschina.net/webzhifeiji/blog/5271820

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Linux 内核即将用上最新的 Zstd 实现

Zstandard 因其快速的解压能力以及整体出色的设计和性能，在整个开源生态中被越来越多地使用——例如在 Linux 内核中的应用。 虽然 Linux 内核越来越多地支持使用 Zstd 进行各种压缩，但目前内核中的 Zstd 代码属于比较古老的版本。例如 Linux 内核使用 Zstd 压缩模块、固件和内核镜像，甚至像 Btrfs Zstd 文件系统这样的实现。 来自 Facebook 的 Zstd 维护者 Nick Terrell 积极从上游为 Linux 内核使用的 Zstd 更新代码，让内核的实现可以更接近上游并且更易于维护。但这项工作实在过于棘手，最终结果是停滞不前。所以从现在的情况来看，从 Zstd 上游重新构建代码的工作已暂停。 不过 Nick Terrell 最近分享了他正在开发一个新的补丁系列，表示很快就会在这方面采取行动，可能会及时赶上下一个内核合并窗口。 如果 Nick Terrell 能够按他计划的时间完成此项任务，Linux 内核代码至少会达到基于 Zstd 1.5 的状态，并且能够为利用这种压缩算法的功能提供一个良好的性能升级（查看在OpenBenchmar...
2021-09-30
573
上一篇

旅行好帮手：精准可靠的航班动态数据服务

根据中国民航局数据，从2016到2020年，我国国际航线由660条增加到953条，覆盖65个国家、167个城市。同期国际票价大幅降低了35%。航线的增加为旅客出行提供了更多的选择，而票价的降低无疑大大提升了旅客出行的动力，双重因素加成下，我国民航旅客出行数量有了显著提升。据第三方数据，2019年我国机场全年旅客吞吐量超过13亿人次，完成135162.9万人次，比上年增长6.9% 。 2020年，民航旅客群体发生重大的结构转变，90后成为最大的主力人群，他们更关注生活品质，追求良好体验。第三方数据显示，80后和90后的人数占比超过52%，出行的人次数占比达到57% 。从机场基础设施完善升级，到相关便民应用的推出，民航出行相关产业链条也在努力提升服务水平。 飞常准作为全球航班出行服务平台，致力于为全球飞行旅客提供准确及时的航班动态信息。自2011年首发，已伴全球飞行旅客走过10年，累计向超过3亿人提供过航班延误预警、分析和行程规划服务。 智能定位城市，一键搜索酒店 2015年始，飞常准推出酒店预订、接送机等服务，为方便旅客出行，着手布局全流程出行服务；酒店预订业务成为其重要方向，精准的定位...
2021-09-30
657
下一篇

相关文章

发表评论

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2025-12-12 大小: 211.28KB 下载: 54次
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2025-12-28 大小: 1MB 下载: 4次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
Service Mesh Jdk25 DeepSeek SpringCloud Gemini3 Kubernetes HarmonyOS6 SpringBoot4 Docker Redis Nacos3 Rocky OpenAi

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册