Vue 网络框架axios

2021年2月16日 0条评论 800次阅读 0人点赞

axios使用

npm install axios --save

功能特点:

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

支持的请求方式:

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]])

常见的配置选项

请求地址: url: ‘/user’,
请求类型: method: ‘get’,
请根路径: baseURL: ‘http://www.mt.com/api’,
请求前的数据处理: transformRequest:[function(data){}],
请求后的数据处理: transformResponse: [function(data){}],
自定义的请求头: headers:{‘x-Requested-With’:’XMLHttpRequest’},
URL查询对象: params:{ id: 12 },
查询对象序列化函数: paramsSerializer: function(params){ }
request body: data: { key: ‘aa’},
超时设置: timeout: 1000,
跨域是否带Token: withCredentials: false,
自定义请求处理: adapter: function(resolve, reject, config){},
身份验证信息: auth: { uname: ”, pwd: ’12’},
响应的数据格式: json / blob /document /arraybuffer / text / stream
responseType: ‘json’,

全局配置

很多参数都是固定的. 我们可以进行一些抽取, 也可以利用axiox的全局配置

axios.defaults.baseURL = '127.0.0.1:8000'
axios.defaults.timeout = 5000
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

对axios进行实例封装

减少项目整体对axios的依赖, 如果后期换网络框架只需要重新封装一次就可以了,而不用在每个调用axios的地方进行修改
在src下创建network目录,下面创建request.js文件

import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
    // 1.比如config中的一些信息不符合服务器的要求
    // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
    // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
  instance.interceptors.request.use(config => {
    // console.log(config);


    // 处理完成后还需要返回给请求使用
    return config
  }, err => {
    // console.log(err);
  })

  // 2.2.响应拦截
    // 响应的成功拦截中，主要是对数据进行过滤。
    // 响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。
  instance.interceptors.response.use(res => {
    // 处理响应完成后, 还需要return回去
    return res.data
  }, err => {
    console.log(err);
  })

  // 3.发送真正的网络请求, instance是一个Promise函数
  return instance(config)
}

使用封装的request
- src/App.vue

<template>
  <div id="app">
    <p>{{message}}</p>
  </div>
</template>

<script>
// 导入封装的request模块
import {request} from "./network/request";

export default {
  name: 'App',
  data() {
    return {
      message: "null"
    }
  },
  // 创建是执行的钩子函数
  created() {
    // 使用封装的request模块
    request({
      url: '/home/multidata'
    }).then(res => {
      this.message = res
      // console.log(res);
    }).catch(err => {
      console.log(err);
    })
  }
}
</script>

<style>
</style>

axios的使用

对服务器发送get请求

在src/main.js使用, 通过console.log展示

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

import axios from "axios";

// 1.axios的基本使用
axios({
  url: 'http://123.207.32.32:8000/home/multidata',
   method: 'get'
}).then(res => {
  console.log(res);
})

// 2. 带参数的请求
axios({
  url: 'http://123.207.32.32:8000/home/data',
  method: 'get',
  // 专门针对get请求的参数拼接
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})

// 3.axios发送并发请求
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata'
}), axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(results => {
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})

// 4.使用全局的axios和对应的配置在进行网络请求
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

axios.all([axios({
  url: '/home/multidata'
}), axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))


// 5.创建对应的axios的实例
const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})

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

instance1({
  url: '/home/data',
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})

const instance2 = axios.create({
  baseURL: 'http://222.111.33.33:8000',
  timeout: 10000,
  // headers: {}
})