Vue学习笔记——网络模块封装

视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。

JSONP

对不起。我不会。没学过

image-20210712213759551

image-20210712213809397

image-20210712213816616

axios

特点：在浏览器中发送 XMLHttpRequests 请求，在 node.js 中发送 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]])

下载：npm install axios@0.18.0 --save

网络封装、模拟测试可以用httpbin.org

<font color=#909534>跨域：域名、端口、协议三者任一不同，就是不同域，请求不同域的数据就是跨域</font>

前端一共可以在4个地方给后端传参数：路径、查询参数、请求头、请求体

axios({
  method:'PUT',
  url:'/products/'+100,
  params:{
    page:1,
    perPage:10,
  },
  headers:{
    'X-Hahaha':'666',
  },
  data:{
    name:1,
    sex:2,
  }
})

对应后端↓

request.headers['X-Hahaha']//666
request.body.name//1
request.query.page//1
request.params.id//100

发送基本请求

get

axios请求的两种方式：post↓

axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  method: 'post'
}).then(res =>{
  console.log(res)
})

axios.post()

传数

axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  params: {
    type: 'pop',
    page: 1
  }
})

等价于

axios({
  url: 'http://123.207.32.32:8000/home/multidata?type=pop&page=1'
})

并发all

全局配置

axios.defaults.baseURL = 'http://152.136.185.210:7878/api/m5'
axios.defaults.timeout = 5000

axios.all([axios({
  url:'/home/multidata'
}),axios({
  url:'/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})])

常见的配置选项

axios实例

const instancel = axios.create({
  baseURL: 'http://152.136.185.210:7878/api/m5',
  timeout: 5000
})

instancel({
  url: '/home/multidata'
}).then(res =>{
  console.log(res);
})

封装

axios不支持了以后也可以方便地更改

最终最终封装极致优雅方案：

创建network/request.js

import axios from "axios";
export function request(config) {
  return new Promise((resolve,reject) =>{
    const instance = axios.create({
      baseURL: 'http://152.136.185.210:7878/api/m5',
      timeout: 5000
    })

    //发送真正网络请求
    return instance(config)
  })
}

main.js调用

import {request} from "./network/request";

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

funciton test(a,b){
    用a、b进行各种操作
}

使用函数时
test(参数，参数)

当参数是一个函数时
test(function (res){},function (err){});

拦截器

//2.axios的拦截器
instance.interceptors.request.use(aaa =>{
  console.log(aaa);
  return aaa
},err =>{
  console.log(err);
});

请求拦截

instance.interceptors.request.use( , )

2.1比如config中的一些信息不符合服务器的邀请
2.2比如每次发送网络请求时，都希望在节目中显示一个请求的图标
2.3某些网络请求（比如登陆（token）），必须携带一些特殊的信息

响应拦截

instance.interceptors.response.use( , )

总目录：
邂逅Vuejs
Vue基础语法
 组件化开发
 前端模块化
 webpack详解
 Vue CLI详解
 vue-router
Promise的使用
 Vuex详解
网络模块封装
项目实战