axios formdata提交_vue中简单的axios二次封装

关注“前端学苑” ，坚持每天进步一点点

「~axios封装~」

前端技术真是一个发展飞快的领域，jquery的时代，那时用的是 ajax 来处理数据请求。现在vue时代已经到来，axios 和 fetch都已经开始分别抢占“请求”这个前端高地。本文将会尝试着阐述他们之间的区别，并给出自己的一些理解。

一、ajax, Axios, Fetch区别：

1、JQuery ajax ( 廉颇老矣，尚能饭，但是总有饭不动的一天 )

对原生XHR的封装，除此以外还增添了对JSONP的支持。JQuery ajax经过多年的更新维护，真的已经是非常的方便了。

$.ajax({   type: 'POST',   url: url,   data: data,   dataType: dataType,   success: function () {},   error: function () {}});

缺点：

1)本身是针对MVC的编程，不符合现在前端MVVM的浪潮。

2)基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案。

3)JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务)

最主要的是随着VUE，REACT新一代框架的兴起，以及ES规范的完善，更多API的更新，JQuery这种大而全的JS库，未来的路会越走越窄。

2、Axios ( 谁敢横刀立马，唯Axios将军 )

Vue2.0之后，Axios替换JQuery ajax。Axios 是一个基于 promise 的 HTTP 库，用于浏览器和node.js等http客户端。符合最新的ES规范。

axios({    method: 'post',    url: '/user/12345',    data: {        firstName: 'Fred',        lastName: 'Flintstone'    }}).then(function (response) {    console.log(response);}).catch(function (error) {    console.log(error);});

Axios特性

1)支持 promise API

2)拦截请求和响应

3)转换请求数据和响应数据

4)取消请示

5)自动转换JSON数据

6)客户端支持防御 XSRF

3、Fetch ( 酋长的孩子，还需成长 )

Fetch号称是AJAX的替代品，好处如下：

1) 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里。

2) 更好更方便的写法，诸如：

try {  let response = await fetch(url);  let data = response.json();  console.log(data);} catch(e) {  console.log("Oops, error", e);}

Fetch的优势主要优势就是：

1)更加底层，提供的API丰富(request, response)

2)脱离了XHR，是ES规范里新的实现方式

Fetch 常见坑

1)Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})

2)服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

二、Vue中axios的使用

axios为什么要二次封装

1、代码封装，重用性高，减少代码量，减低维护难度。

2、统一处理一些常规的问题一劳永逸，如http错误。

3、拦截请求和响应，提前对数据进行处理，如获取token，修改配置项。

具体配置如下：

1、请求配置默认值

1)全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2)自定义实例默认值

// 创建实例时设置配置的默认值var instance = axios.create({  baseURL: 'https://api.example.com'});// 在实例已创建后修改默认值instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

2、axios常用请求方法

axios请求方法：get，post，put，patch，delete

get: 获取数据

post: 提交数据 (表单提交+文件上传)

put: 更新数据 (所有数据推送到后端)

patch: 更新数据 (只将修改的数据推送到后端)

delete: 删除数据

1)get方法传递参数时需注意

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

说明：

status code: 304 not modified  //请求到的数据与上次相同就会返回304  数据重定向。

2)post方法

常用的data格式：

(1)form-data 用于表单提交，图标与文件上传

Content-Type：multipart/from-data  //表示post方式以 formdata 形式发送

(2)applicition/json

Content-Type：applicition/json   //表示post方式以 json 格式发送 

3)delete方法

(1)接口需要在url上拼接参数

axios.delete('/delete',{  params:{id: 12}     //query string parameters}).then()

(2)不是在url上进行传输的

axios.delete('/delete',{    data:{id: 12}       //request payload}).then()

4)并发请求

并发请求：同时进行多个请求，并统一处理返回值。两个步骤：

(1)axios.all([]).then()

(2)axios.spread()

axios.all([  axios.get('url1'),  axios.get('url2')]).then(  axios.spread((res1, res2) => {    console.log(res1, res2);  }))

3、拦截器

1)拦截器科普

// 添加请求拦截器axios.interceptors.request.use(function (config) {    // 在发送请求之前做些什么    return config;}, function (error) {    // 对请求错误做些什么    return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use(function (response) {    // 对响应数据做点什么    return response;}, function (error) {    // 对响应错误做点什么    return Promise.reject(error);});

2)取消拦截器

let interceptors = axios.interceptors.request.use(  config => {    // 在发送请求前做些什么    return config  },  error => {    // 请求错误的时候做什么    return Promise.reject(error)  });// 取消拦截器axios.interceptors.request.eject(interceptors);

3)响应的错误处理封装

axios.interceptors.response.use(response => {    return response;}, error => {    if (error && error.response.status) {        switch(error.response.status) {            case 400:                error.message = '请求错误';                break;            case 401:                error.message = '未授权，请重新登录';                break;            case 403:                error.message = '拒绝访问';                break;            case 500:                error.message = '服务端出错';            default:                error.message = `连接错误${error.message.status}`;        }    }    else {        error.message = '连接服务器失败';    }    return Promise.resolve(error);});

总结

1 、对axios的二次封装可以统一前后端交互的请求/响应数据类型，统一处理http错误码和自定义的code，避免在组件中频繁的判断，以及code码的使用混乱。

2､对api的集中管理和按需引用有助于项目管理和重构，代码的复用,实际项目开发时可以按模块对api进行划分，结构清晰。

推荐热门技术文章：

1、一篇文章，教你学会Git

2、初探 Electron 桌面应用 - 理论篇

3、解锁 Webpack，看这篇就够了

4、干货：前端开发常见规范

5、这一次，彻底弄懂 Promise

6、关于移动端适配，你必须要知道的

7、你还是只会 npm install 吗？

8、让程序员变懒的 “vue-admin-template” 后台管理系统

9、这样配置，让你的VS Code好用到飞起！

10、前端性能优化实战

觉得本文对你有帮助？请分享给更多人

关注「前端学苑」加星标，提升前端技能