Vue：Axios发送网络请求

axios

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

http://www.axios-js.com/zh-cn/docs/

安装

npm install axios --save

使用

发送Get请求- 不带参数

import axios from 'axios'

// 发送请求, 默认为get请求
axios({
  url: "http://49.232.203.244:8001/v1/link",
}).then(res => {
  console.log(res);
})

发送Get- 带查询参数

// get 请求带查询参数
axios({
  url: "http://49.232.203.244:8001/v1/post",
  params: {
    limit: 10,
    page: 1
  }
}).then(res => console.log(res));

发送post请求

// post 请求
axios({
  url: "http://49.232.203.244:8001/v1/auth",
  method: "post",
  data: {
    username: "yan22",
    password: "S$V0CLeH_$"
  }
}).then(res => console.log(res))

并发请求

// 发送多个请求（并发）
axios.all([
  axios({
    url: "http://49.232.203.244:8001/v1/link",
  }),
  axios({
    url: "http://49.232.203.244:8001/v1/post",
    params: {
      limit: 10,
      page: 1
    }
  })
]).then(results => {
  console.log(results)
})

响应结构示例

全局配置

// 配置默认 url
axios.defaults.baseURL = "http://49.232.203.244:8001"
// 配置超时时间 5s
axios.defaults.timeout = 5000

axios({
  url: "/v1/link" // 最终访问的地址为： baseURL + url
}).then(res => console.log(res))

axios实例

解决在一个项目中，需要调用多台服务器上的接口服务问题

// axios实例, 解决一套项目接口部署到多台服务器上

const instancel = axios.create({
  baseURL: "http://49.232.203.244:8001",
  timeout: 3000
})

instancel({
  url: "/v1/link"
}).then(res => console.log(res))


const instancel9001 = axios.create({
  baseURL: "http://49.232.203.244:8000"
})

instancel9001({
  url: "/message",
  params: {
    page: 1
  }
}).then(res => console.log(res))

网络请求封装

network/request.js

import axios from 'axios'

export function request(config){
    // 创建axios实例
    const instance = axios.create({
        baseURL: "http://49.232.203.244:8001",
        timeout: 5000
    })

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

使用其来发送请求

import {request} from '../src/network/request'

// 使用封装的axios 发送请求
request({
  url: "/v1/link",
}).then(res => console.log(res))
.catch(err => console.log(err))

拦截器

请求/响应后 进行处理

如: 添加header，loading 图标，token 校验

import axios from 'axios'

export function request(config){
    // 创建axios实例
    const instance = axios.create({
        baseURL: "http://49.232.203.244:8001",
        timeout: 5000
    })

    // axios 拦截器
    instance.interceptors.request.use(config => {
        // 请求成功
        console.log(config)
        // 拦截之后需要把配置返回出去
        return config
    }, err => {
        // 失败
        console.log(err)
    })

    // 响应拦截器
    instance.interceptors.response.use(res => {
        console.log(res)
        // 拿到接口实际返回的内容
        return res.data
    }, err => {
        console.log(err)
    })

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

源码地址

gitee: https://gitee.com/zy7y/hello-fast-api-vue