十一、网络请求

一、axios基本属性和设置

axios文档

安装

npm i -S axios

axios支持的请求方式

• get
• post
• put：修改数据
• delete：删除数据

axios响应结果的属性

• config：配置信息
• data：实际响应的数据
• headers：响应头信息
• status：响应状态码
• statusText：响应状态信息

axios请求配置

// 设置根路径地址
axios.defaults.baseURL = 'https://api.example.com';

// 设置超时时间
axios.defaults.timeout = 3000;

// 设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

二、axios封装

请求配置：src/network/request.js

import axios form 'axios'

export function request(config) {
  // 1、创建axios实例
  const instance1 = axios.create({
    baseUrl: 'http://www.baidu.com',
    timeout: 5000
    // headers: {'X-Custom-Header': 'foobar'}
  })
  
  // 2.1、axios拦截器——请求拦截
  instance1.interceptors.request.use(config => {
    // 1.比如config中一些信息不符合服务器要求，需要修改
    
    // 2.比如每次发送网络请求时，希望在界面添加一个loading加载的图标
    
    // 3.某些网络请求（比如登录（需要携带token），携带一定信息）
    
    return config
  }, err => {
    console.log(err)
  })
  
  // 2.2、axios拦截器——响应拦截
  instance1.interceptors.response.use(res => {
    // 处理响应数据
    return res.data
  }, err => {
    console.log(err)
  })
  
  // 3、发送真正的网络请求
  return instance1(config)
}

请求封装：src/network/home.js

import { request } from './request'

export function getHomeMultidata () {
  return request({
    url: '/home/mulitdata'
  })
}

export function getHomeGoods (type, page) {
  return request({
    url: '/home/mulitdata',
    params: {
      type,
      page
    }
  })
}

组件内调用

getHomeMultidata () {
    getHomeMultidata().then(res => {
        this.banners = res.data.banner.list
    })
},
getHomeGoods (type) {
    const page = this.goods[type].page + 1
    getHomeGoods(type, page).then(res => {
        this.goods[type].list.push(...res.data.list)
        this.goods[type].page += 1
    })
}

 三、mock数据

1、准备好需要mock的数据，以json格式文件保存在public/mock下

{
    "msg": "success",
    "code": 0,
    "data": [
    {
        "id": 1,
        "img": "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/bce52a5f143cd3e25c6c39c7a0fd7f276ce43bad.png?sign=f4ec5771f7eabd11226fe5f4b7f0f6e8&t=5fa403f2",
        "title": "第1张图片"
    },
    {
        "id": 2,
        "img": "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/6018ac895dd29437b1d023c121c7539ecf2e9221.jpeg?sign=47da092f8a6a1650df3da3dd3dd40cb3&t=5fa4041d",
        "title": "第2张图片"
    },
    {
        "id": 3,
        "img": "https://storage.lynnn.cn/assets/markdown/91147/pictures/2020/11/f81d133833b89a18cb1842f449810d16ec5d3c78.jpeg?sign=22eadb72caac161df642aa18b84127a8&t=5fa40431",
        "title": "第3张图片"
    }]
}

2、安装json-server帮助我们快速启动一个web服务（测试）

npm i -g json-server

注意：json-server要求在（单文件）json文件中只能有一个顶级节点包裹需要返回的数据，这个唯一顶级节点会被用于地址中，而不是显示在返回的数据中

3、配置mock：有多个json文件

• 创建public/mock/mock.js文件（文件名并非固定）

// json-server配置文件(commonJs模块化)
const swiper = require("./cb-swiper.json");

// 导出
module.exports = () => ({
  swiper,
});

• 创建mock的路由文件public/mock/route.json

  • api为路由前缀

{
  "/api/swiper": "/swiper"
}

• 在package.json文件中的scripts中配置启动命令

• 启动web服务

npm run mock