网络封装模块

网络封装模块

Vue中发送网络请求有非常多的方式，在开发中，一般不建议使用传统的ajax，因为传统的Ajax是基于XMLHttpRequest(XHR)，需要对Ajax进行一次封装，所以在Vue中的开发中一般使用axios

在前端开发中，一种常见的网路请求方式就是 JSONP，主要是为了解决跨域访问的问题。我们部署在domain1.com服务器上的项目不可以直接访问domain2.com服务器上的资料，此时，JSONP就通过

JSONP

此处添加JSONP的 维基百科解释

axios (ajax i/o system)

功能特点 ：

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

axios框架的基本使用

axios支持多种请求方式

• axios(config) //默认使用get方式
• 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 --save axios

在线mock网站：https://www.fastmock.site

在主文件中导入，直接使用

import axios from 'axios'

axios({
  url:'https://www.fastmock.site/mock/83a42e7083c3cb6ae9f71ca30567a519/home/home/mutildata'
}).then(res=>{
  console.log(res)
})

//get请求方式的 参数拼接
axios({
  url:'https://www.fastmock.site/mock/224e535af85c8390bb1c1d6671bdf185/miniprogram/home',
  //专门针对get请求的参数拼接,传递的参数key:value键值对
  params:{
    type:'pop',
    page:1
  }
}).then(res=>{
  console.log(res)
})
//同时发送多个并发请求
//传入数组
axios.all([
  axios({
    url:'https:/miniprogram/home'
  }),
  axios({
    url:'https:/miniprogram/home_1'
  })
]).then(res=>{
  console.log(res);
})

//对多个result做处理
axios.all([
  axios({
    url:'https:/miniprogram/home'
  }),
  axios({
    url:'https:/miniprogram/home_1'
  })
]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2)
}))

axios的全局配置

axios.defaults.baseURL = "http://192.168.0.1/"
axios.defaults.timeput = 5000
//单位式毫秒

常见的配置选项

• post 请求方式 ，request body : data:{ key: ‘aa’ }
• get请求方式 ， URL 查询对象：params:{ id :1,name:‘leesure’}

axios 模块的配置

每一个实例一个实例，一个实例对应一个配置

//创建一对应的axios的实例
const instance1= axios.create({baseURL:'https://www.fastmock.site/mock/224e535af85c8390bb1c1d6671bdf185/miniprogram'
}) 
//使用实例
instance1({
  url:'/home'
}).then(res=>{
  console.log(res)
})

axios的封装

//创建文件 src//network/request.js

import axios from 'axios'
//success,failure是函数
export function request(config){
  //创建axios的实例
  const instance = axios.create({
    baseURL:'https://www.fastmock.site/mock/224e535af85c8390bb1c1d6671bdf185/miniprogram'
  }) 
  return instance(config)
}

//mian.js中调用
import {request} from './network/request.js';
 
request({
  url:'/home'
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})

axios拦截器的使用

//axios的拦截器
  instance.interceptors.request.use((config=>{
    console.log(config)

    //拦截器的token请求，比如登录token

    //拦截器放行
    return config;
  },err=>{
    return Promise.reject(err)
  })) 


  //响应拦截
  instance.interceptors.response.use(res=>{

    return res.data;
  },err=>{

  })