vue58 —— axios

网络模块封装—— 封装进行网络请求的第三方框架

常见网络请求模块

1. 传统Ajax （基于XMLHttpRequest [XHR]）
2. JQuery-Ajax
3. JSONP – 非正式传输协议（主要解决跨域问题）
   

Ajax直接请求普通文件存在跨域无权限访问的问题
Web页面上调用js文件时则不受是否跨域的影响（不仅如此，凡是拥有”src”这个属性的标签都拥有跨域的能力。如<\script>、<\img>、<\iframe>）
非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

4. Vue-resource ( Vue1.x, 不再更新）
5. axios

axios功能特点：

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

axios请求方式：

• 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]])

axios使用：

基本使用：

安装：
npm install axios --save

导入后可直接使用：
main.js：

import axios from 'axios'
...
axios({
  // url: 'http://123.207.32.32:8000/home/multidata'
  url: 'http://httpbin.org/',  // 默认情况下是get请求
  mode: 'post' // 更改为post方式
}).then(res => {
  console.log(res); 
})

http://httpbin.org/ 做请求测试
http://123.207.32.32:8000/home/multidata 老师的服务器IP地址
http://123.207.32.32:8000/home/data?type=sell&page=3 做上拉加载的接口

发送并发请求：

axios.all([axios(),axios(),..]).then(res=>{
	res  --- res[0],res[1]
	})
或者
... .then( axios.spread( (res1,res2) => {

	  }))

全局配置：

很多参数是固定的，可以做一些抽取或者利用axios的全局配置

axios.defaults.baseURL = 'http://123.207.32.32:8000/',
axios.defaults.timeout = 5000 // 5秒内未请求到，视为超时
axios({
  url: 'home/multidata'
}).then(res => {
  console.log(res); 
})

常见配置选项：

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

使用axios实例

上面是使用全局axios及其相关配置

const instance1 = new axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
instance1({
  url: '/home/multidata'
}).then(res => {
  console.log('----instance1-----',res); 
})

const instance2 = new axios.create({
  baseURL: 'http:',
  // timeout: 6000,
  method: 'get'
})
instance2({
  url: '//httpbin.org/'
}).then(res => {
  console.log('-----instance2------',res);  
},err => {
  console.log('-----instance2 error-------------',err);  
})

axios封装：

src文件夹下，创建network文件夹 – 创建request.js 文件
request.js:

import axios from 'axios'

// 最终方案
export function request2(config){
  const instance2 = new axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  return instance2(config)  //instance2(config)的返回值就是Promise
  
  // return new Promise((resolve,reject) => {   
  //   instance2(config)
  //   .then(res=>{
  //     resolve(res)
  //   })
  //   .catch(err=>{
  //     reject(err)
  //   })
  // })
}

main.js:

import {request2} from './network/request'
request2({
  url: '/home/multidata'
}).then(res=>{
  console.log(res); 
}).catch(err=>{
  console.log(err); 
})

拦截器：

axios提供了四种拦截：

• 请求成功
• 请求失败
• 响应成功
• 响应失败

//2. axios的拦截器
  // 2.1 请求拦截
  instance2.interceptors.request.use(config => {
    console.log('++++++success+config++++++',config);
    return config  // 注意拦截完要返回
  },err => {
    console.log('++++++error+err++++++',err);  
    return err
  })
  //2.2 响应拦截
  instance2.interceptors.response.use(res => {
    return res.data // 注意要返回。数据不在这里处理，在调用出处理
  },err => {
    console.log('!!!err!!!',err); 
    return err
  })

请求拦截的原因：
a. 比如一些config中的内容不符合服务器的要求
b. 每次发送网络请求时，希望在页面中显示一个请求的图标
c. 某些网络请求必须携带一些特殊的信息（如，登录 token）

拦截注意： 拦截完了以后，要返回