Axios —— 网络请求

不情不愿

已于 2022-05-04 17:59:17 修改

阅读量788

点赞数

分类专栏： Vue学习文章标签： vue.js javascript

于 2022-05-03 17:41:48 首次发布

本文链接：https://blog.csdn.net/A____t/article/details/124558480

版权

Vue学习专栏收录该内容

36 篇文章 12 订阅

订阅专栏

本文详细介绍了如何在Vue.js应用中安装和使用Axios库进行HTTP请求。从基本的GET和POST请求，到并发请求、全局配置、实例化以及错误处理，展示了Axios的强大功能。同时，还提到了封装 Axios 请求以提高代码复用性和维护性，并讲解了如何设置Axios的拦截器来处理请求和响应。最后，提供了封装好的网络请求模块的使用示例。

摘要由CSDN通过智能技术生成

安装框架：

npm install axios --save

基本使用：

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

Vue.config.productionTip = false

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

//请求方式1
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',
  params:{
    type:'pop',
    page: 1
  },
  method:'get',
}).then(res => {
  console.log(res);
})
//发送并发请求1
axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  }), axios({
    url:'http://123.207.32.32:8000/home/multidata'
  })
]).then(res => {
  console.log(res[0]);
  console.log(res[1])
})
发送并发请求2
axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  }), axios({
    url:'http://123.207.32.32:8000/home/multidata'
  })
]).then(axios.spread((res1, res2) => {
  console.log(res1)
  console.log(res2);
}))

全局配置：

axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
//请求方式1
axios({
  url:'/home/multidata',
  method:'get'
}).then(res => {
  console.log(res);
})

创建对应的 axios 的实例：

//2.创建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://httpbin.org/#/',
  timeout: 1000
})

instance2({
  url:'',
}).then(res => {
  console.log(res);
})

axios 的封装：

第三方的东西不要直接在组件中使用，封装之后在使用可以减少后续的代码维护工作，如果第三方的框架不再使用或者需要使用另一个框架，只需要对封装的代码文件进行维护，不需要对每一个组件都进行更新维护，提高工作效率。

新建文件夹名为 network ➡新建文件 request.js

import axios from 'axios'
// export function request(config){

//   return new Promise((resolve, reject) =>{
//     //创建 axios 的实例
//     const instance = axios.create({
//       baseURL:'http://123.207.32.32:8000',
//       timeout: 5
//     })

//     //发送真正的网络请求
//     instance(config).then(res =>{
//       resolve(res)
//     }).catch(err => {
//       reject(err)
//     })
//   })
// }
export function request(config){
    //创建 axios 的实例
    const instance = axios.create({
      baseURL:'http://123.207.32.32:8000',
      timeout: 5
    })
    
    //发送真正的网络请求
   return instance(config)
}

封装模块的使用：

//使用封装的 request 模块
import {request }from '../network/request'

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

axios 拦截器：

    instance.interceptors.request.use(config => {//请求成功发送时
      console.log(config)
      //使用情况：
      // 1.比如 config中的一些信息不符合服务器的请求时，需要进行配置
      // 2.在请求过程中加入一些动画：请求中……
      // 3.某些网络请求（登录 token），必须携带一些特殊信息， 如果没有携带，可以拦截跳转到登录界面
      return config //拦截下来之后，还需要将请求返回出去
    }, err => {//发送请求失败
      console.log('发送请求失败');
      console.log(err)
    })
    instance.interceptors.response.use(res =>{//请求成功响应时
      //拦截到结果后进行一些处理
      return res.data //将最终结果返回
    }, err =>{//请求没有成功响应时
      console.log(err);
    })

免费下载链接：Axios 网络请求的封装