vue学习——网络模块，axios基础，axios的封装

网络模块及其封装

1. 网络模块的选择

传统Ajax，XMLHttpRequest(XHR)

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

JQuery-Ajax

• 相对于传统ajax很好用
  为什么不用
• 在Vue的整个开发中不需要jQuery
• 没必要为了用网络请求就引用这个重量级的框架
  • jQuery的代码1w+行.Vue的代码才1w+行.

Vue1.x的Vue-resource

• Vue2.0之后，不再维护。作者推荐axios

2. Jsonp

使用jsonp最主要是为了解决跨域问题

原理

- 核心在于通过<script>标签的src来帮助我们请求数据

• 利用<script>标签的src帮助我们去服务器请求到数据, 将数据当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json.
• 封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称.

3.axios

3.1. 为什么使用axios

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

axios的请求方式

• axios(config)——常用，可在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]])

3.2. 使用axios——基础使用

1. 安装 npm install axios --save
2. 引入 import axios from 'axios'
3. 配置并使用
4. 返回数据获取：直接在axios后.then即可

//1.导入axios
import axios from 'axios'

//2.使用axios(基础使用传入config)
axios({
  //在此设置config
  url: "http://xxxx/data?type=sell&page=1"

}).then(res => {
  //数据的获取：axios返回的是一个promise，直接在then中获取结果即可
  console.log(res)
});

• axios.get或method:'get'

  axios({
    //在此设置config
    url: "http://xxx/data?type=sell&page=1",
    //设置请求方式为get
    method: 'get'
  }).then(res => {
    console.log(res)
  });
  
  //或：使用axios.get(url, config)
  axios.get("http://xxx/data?type=sell&page=1", {
    //在此设置其他config
  
  }).then(res => {
    console.log(res)
  });
  
  

• 参数：直接写在url里或params(针对get方式的参数拼接)

   axios({
        //在此设置config
        url: "http://xxx/data",
        //针对get请求的参数拼接
        params: {
          page: 1,
          type: 'sell'
        },
        method: 'get'
      }).then(res => {
        console.log(res)
      });
  

获取到的res结果

• 服务器返回的数据是data
• 其他的是axios框架添加的，我们可以在封装的时候过滤掉(3.6.拦截器）
  • config
  • headers
  • request
  • status
  • statusText

3.3. 常见config设置

• method : 请求类型——post,get...
• params : url查询对象，针对get方法的参数拼接
• data ：对象，request body，针对post方法的参数拼接
• baseURL :根路径
• timeout ：超时时间
• transformRequest：[function(data){}] :请求前的数据处理
• transformResponse： [function(data){}] :请求后的数据处理
• headers : 自定义请求头 headers:{'x-Requested-With':'XMLHttpRequest'}
• responseType ：响应的数据格式 json / blob /document /arraybuffer / text / stream

3.4. axios.all

• axios.all([]),可放入多个请求的数组，数组内每个对象为axios({})。

  • 简写：axios.all([axios({}), axios({})]).then(results =>{} );

• 返回的结果也为数组

  .then(results => {//获取方式1：直接获取结果数组
     console.log(results);
  });
  

• 使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

  .then(axios.spread((res1, res2) => { //对数据进行展开
      console.log(res1);
      console.log(res2);
    }))
  

• 也可使用数组的解构直接将数组展开

  .then(([res1, res2]) => { //方式3：数组解构
      console.log(res1);
      console.log(res2);
    })
  

3.5. axios的全局配置——axios.default

可在此对公共配置进行设定

• baseUrl，timeout等

3.6. axios实例

从axios模块中导入对象时, 使用的实例是默认的实例。但是后续开发中, 某些配置可能会不太一样.比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
实际开发中的服务器：可能有多个服务器，有不同的ip地址。（可能有nginx代理等）
且实际
创建对应axios的实例——axios.create

//创建实例
const instance1 = axios.create({
  baseURL: "http://xxx/x1",
  timeout: 5000
})

const instance2 = axios.create({
  baseURL: "xxx/x2",
})
//使用实例
instance1({
  url: "home/data",
  params: {
    page: 1,
    type: 'sell'
  },
}).then(res => {
  console.log(res);
})

3.6 axios拦截器

用于我们在发送每次请求或者得到相应后，进行对应的处理。示例见4.axios封装

请求拦截器 instance.interceptors.request.use(config => {}, err =>{});

• 请求前的拦截
  • 对config信息进行修改，对参数序列化等
  • 可在此添加loading动画等
  • 有些请求需要验证身份或用户信息，判断是否有token，若无则跳转登录页面
• 请求失败的拦截
  • 一般不会用到。 可能：请求超时，跳转到错误页面

响应拦截器 instance.interceptors.response.use(config => {}, err =>{});

• 响应成功时的拦截（必须返回数据）
  • 主要进行数据的过滤
• 响应失败时的拦截
  • 根据status判断错误码，跳转到不同页面等

4. axios封装

封装的好处：无需在组件或页面处写网络请求。易维护（当网络模块或框架需更换时，不用到处修改）

• 创建network文件夹。封装request.js

import axios from 'axios'

//不返回default，而是返回实例，这样可以在有新的请求配置时增加新的实例
export function request(config) {
  //1.创建axios的实例
  const instance = axios.create({
    baseURL: "http:/xxxxx",
    timeout: 5000
  })

  //2.配置axios的拦截器
  //请求拦截
  instance.interceptors.request.use(config => {
    //对config信息进行修改
    //可在此添加loading等
    //有些请求需要验证身份或用户信息
    return config;
  }, err => {
    //一般不会进入这里
  })

  //响应拦截
  instance.interceptors.response.use(response => {
    //响应成功时
    //过滤返回的config，status等信息，只返回数据。
    //这里必须有返回值，否则请求不到数据
    return response.data
  }, err => {
    //响应失败时
    //处理失败
  })

  //3.发送请求(返回的就是一个Promise)
  return instance(config)
}

其他相关

http://httpbin.org

可用于网络请求的测试等