【Vue2】七.网络封装

1. 网络模块选择

选择一: 传统的Ajax是基于XMLHttpRequest(XHR)

为什么不用它呢?

• 配置和调用方式等非常混乱.
• 编码起来看起来就非常复杂.
• 所以真实开发中很少直接使用, 而是使用jQuery-Ajax

选择二: 经常会使用jQuery-Ajax

为什么不选择它呢?

• 首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了.
• 那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理吗?
  jQuery的代码1w&＃43;行.
  Vue的代码才1w&＃43;行.
• 完全没有必要为了用网络请求就引用这个重量级的框架.

选择三: 官方在Vue1.x的时候, 推出了Vue-resource.

为什么不选择它呢?

• 在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新.
• 那么意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护.
• 对以后的项目开发和维护都存在很大的隐患.

选择四: Vue作者推荐的axios

2. JSON的封装

使用JSONP最主要的原因往往是为了解决跨域访问的问题.

JSON原理的回顾

JSONP的原理是什么呢?

• JSONP的核心在于通过

JSON代码的封装

3. axios的使用

认识axios

为什么选择axios

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

axiox请求方式

• axios(config)
• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

发送请求

发送get请求

axios({url: &＃39;http://xxx.com/data&＃39;,// method: &＃39;post&＃39;
}).then(res &＃61;> {console.log(res);
})axios({url: &＃39;http://xxx.com/data&＃39;,// 专门针对get请求的参数拼接params: {type: &＃39;pop&＃39;,page: 1}
}).then(res &＃61;> {console.log(res);
})


发送并发请求

有时候, 我们可能需求同时发送两个请求

• 使用axios.all, 可以放入多个请求的数组.
• axios.all([]) 返回的结果是一个数组&＃xff0c;使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

axios.all([axios({url: &＃39;http://xxx.com/data&＃39;
}), axios({url: &＃39;http://xxx.com/data&＃39;,params: {type: &＃39;sell&＃39;,page: 5}
})]).then(results &＃61;> {console.log(results);console.log(results[0]);console.log(results[1]);
})


axios全局配置

axios.defaults.baseURL &＃61; &＃39;http://xxx.com/data&＃39;
axios.defaults.timeout &＃61; 5000axios.all([axios({url: &＃39;/home/multidata&＃39;
}), axios({url: &＃39;/home/data&＃39;,params: {type: &＃39;sell&＃39;,page: 5}
})]).then(axios.spread((res1, res2) &＃61;> {console.log(res1);console.log(res2);
}))


常见配置选项

• 请求地址
  • url: ‘/user’,
• 请求类型
  • method: ‘get’,
• 请根路径
  • baseURL: ‘http://www.mt.com/api’,
• 请求前的数据处理
  • transformRequest:[function(data){}],
• 请求后的数据处理
  • transformResponse: [function(data){}],
• 自定义的请求头
  • headers:{‘x-Requested-With’:‘XMLHttpRequest’},
• URL查询对象
  • params:{ id: 12 },
• 查询对象序列化函数
  • paramsSerializer: function(params){ }
• request body
  • data: { key: ‘aa’},
• 超时设置s
  • timeout: 1000,
• 跨域是否带Token
  • withCredentials: false,
• 自定义请求处理
  • adapter: function(resolve, reject, config){},
• 身份验证信息
  • auth: { uname: ‘’, pwd: ‘12’},
• 响应的数据格式 json / blob /document /arraybuffer / text / stream
  • responseType: ‘json’,

axios实例

为什么创建axios实例

• 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
• 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
• 但是后续开发中, 某些配置可能会不太一样.
• 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
• 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

如何创建axios实例

const instance1 &＃61; axios.create({baseURL: &＃39;http://xxx.com/data&＃39;,timeout: 5000
})instance1({url: &＃39;/home/multidata&＃39;
}).then(res &＃61;> {console.log(res);
})instance1({url: &＃39;/home/data&＃39;,params: {type: &＃39;pop&＃39;,page: 1}
}).then(res &＃61;> {console.log(res);
})const instance2 &＃61; axios.create({baseURL: &＃39;http://222.111.33.33:8000&＃39;,timeout: 10000,// headers: {}
})


axios的封装

import axios from &＃39;axios&＃39;export function request(config) {// 1.创建axios的实例const instance &＃61; axios.create({baseURL: &＃39;http://***:8000&＃39;,timeout: 5000})// 2.axios的拦截器// 2.1.请求拦截的作用instance.interceptors.request.use(config &＃61;> {// console.log(config);// 1.比如config中的一些信息不符合服务器的要求// 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标// 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息return config}, err &＃61;> {// console.log(err);})// 2.2.响应拦截instance.interceptors.response.use(res &＃61;> {// console.log(res);return res.data}, err &＃61;> {console.log(err);})instance.interceptors.response.use(res &＃61;> {return res.data}, err &＃61;> {console.log(err)})// 3.发送真正的网络请求return instance(config)
}


axios的拦截器

axios提供了拦截器&＃xff0c;用于我们在发送每次请求或者得到相应后&＃xff0c;进行对应的处理

请求拦截器

请求拦截中错误拦截较少&＃xff0c;通常都是配置相关的拦截
可能的错误比如请求超时&＃xff0c;可以将页面跳转到一个错误页面中

响应拦截器

响应拦截中完成的事情&＃xff1a;

• 响应的成功拦截中&＃xff0c;主要是对数据进行过滤。
• 响应的失败拦截中&＃xff0c;可以根据status判断报错的错误码&＃xff0c;跳转到不同的错误提示页面。