九、网络请求

一、axios

1、基本使用

文档

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js中。

axios是vue作者推荐使用的网络请求库，它具有以下特性：

• 从浏览器中创建 XMLHttpRequests

• 从 node.js 创建 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求数据和响应数据

• 取消请求

• 自动转换 JSON 数据

• 客户端支持防御 XSRF

安装

npm install axios

执行get请求

// GET请求方式
axios.get('/get_data?id=10010').then(ret => console.log(ret.data))

axios.get('/get_data',{
    params: {
        id: 10010,
        name: 'zhangsan',
        age: 26
    }
}).then(ret => console.log(ret.data))

执行post请求

//POST请求方式
axios.post('/set_data', {
      firstName: 'zhang',
      lastName: 'san'
}).then(ret => { })

axios(config)方式

axios({
      method: 'post',
      url: 'set_data',
      timeout: 1000,
      headers: {'X-Custom-Header': 'foobar'},
      data: {
        firstName: 'zhang',
        lastName: 'san'
      }
}).then(ret => { })

执行并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

2、基本属性和设置

• 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';

3、axios实例

针对不同域名

const instace1 = axios.create({
    baseUrl: 'http://123.111.11.11:8000',
    timeout: 5000
})

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

const instace2 = axios.create({
    baseUrl: 'http://123.222.22.22:9000',
    timeout: 10000
})

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

4、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
  })
  
  // 2、axios拦截器
  
  // 3、发送真正的网络请求
  return instance1(config)
}

• 组件中使用

import { request } from '@/newwork/request.js'

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

5、拦截器

• 请求配置：修改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
  })
  
  // 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
    }
  })
}

• 组件内调用

/**
 * 网络请求相关方法，定义在methods中
 * 生命周期函数中不要写过多逻辑代码
 */
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
    })
}