vue前端学习——axiosAPI请求

已于 2022-08-22 13:10:47 修改
阅读量1.1k 收藏 4
点赞数
分类专栏： Vue前端学习 文章标签： 前端 vue.js javascript
于 2022-08-22 09:50:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45105305/article/details/126460030
版权
本文介绍了如何在Vue.js项目中安装和使用Axios进行网络请求，包括基本的GET和POST请求，批量请求，全局配置以及创建axios实例。同时，详细阐述了Axios的拦截器功能，用于在请求前和响应后添加额外的操作，例如设置全局基础URL、处理错误等。最后，展示了如何将axios请求封装到独立模块以提高代码复用性和可维护性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、网络请求

1、安装axios

npm install axios --save

npm install axios@0.18.0 --save

2、基本使用

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)
})
// axios({
//   url: 'http://123.207.32.32:8000/home/multidata',
//   method: 'get'
// }).then(res=>{
//   console.log(res)
// })
// axios({
//   //url:'http://123.207.32.32:8000/home/data?type=pop&page=1',
//   url:'http://123.207.32.32:8000/home/data',
//   params: {
//     type: 'pop',
//     page: 1
//   }
// }).then(res=>{
//   console.log(res)
// })

// 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: 4
//   }
// })
// ]).then(result=>{
//   console.log(result)
// })

axios.default.baseURL = 'http://123.207.32.32:8000' //相同的路径
axios.default.timeout = 5000 //设置超时时间


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

3、数据接收到前端

<template>
  <div id="app">
  <div>{{result}}</div>
  </div>
</template>

<script>
  import axios from 'axios'

export default {
  name: 'App',
  components:{

  },
  data(){
    return {
      result: ''
    }
  },
  created() {
    axios({
      url:'http://123.207.32.32:8000/home/multidata'
    }).then(res=>{
      console.log(res)
      this.result =res;
    })
  }
}
</script>

<style>

</style>

4、axios拦截器

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.interceptors.request;
    instance.interceptors.request.use(config =>{
     // console.log(config)
      //1、比如说config中的一些信息不符合服务器的要求，信息转化，配置相关
      //2、比如每次发送网络请求是，都希望在界面中显示一个请求图标
      //3、某些网络请求（比如登录，（token））,必须携带一些特殊的信息，拦截登录完善。
      return config
    },err =>{
      console.log(err)
    })
    //1、响应拦截
    instance.interceptors.response.use(res => {
      console.log(res);
      //拦截后，需要返回数据，否则处理之后没有返回数。就被拦截了。
      return res.data
    },err => {
      console.log(err)
    })
    //3.发送网路请求
    //2.1、请求成功在撤销请求图标
    return instance(config)
}
//------------------------3-----------------
// export function request(config){
// return new Promise((resolve,reject)=>{
//   //1、创建axios实例
//     const instance = axios.create({
//       baseURL: 'http://123.207.32.32:8000',
//       timeout: 5000
//     })

//   instance(config).then(res => {
//     resolve(res)
//   }).catch(err =>{
//     reject(err)
//   })
// })
// }
// -------------------回调实现---------------------
// export function request(config,success,failure){
//   //1、创建axios实例
//   const instance = axios.create({
//     baseURL: 'http://123.207.32.32:8000',
//     timeout: 5000
//   })

// instance(config).then(res => {
//   //console.log(res)
//   success(res)
// }).catch(err =>{
//   //console.log(err)
//   failure(err)
// })
// }
// ---------2----------------
// export function request(config){
//   //1、创建axios实例
//   const instance = axios.create({
//     baseURL: 'http://123.207.32.32:8000',
//     timeout: 5000
//   })

// instance(config.baseConfig).then(res => {
//   //console.log(res)
//   config.success(res)
// }).catch(err =>{
//   //console.log(err)
//   config.failure(err)
// })
// }

二、重温axios

1、请求方式

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

2、import关键字

1）可以导入第三方包

如：import axios from 'axios'

3、使用详情

1）axios(config)

a、config参数
url:'http://localhost:80/add/addUser'	//参数controller地址
method: 'get'  //设置请求方式。post或者get

.then()  //访问成功后的回调
axios()	//这个方法会返回一个permission对象,拿到数据调用resolve，执行then()方法。
b、使用
axios.post()
axios.get()
c、返回值

概述：返回值是axios框架默认设置的。

config
data	//返回的数据
headers		//请求头
request
status
statusText
d、集体代码
axios({
  url:''
}).then(res=>{
console.log(res);//获取返回对象
})
//config是一个对象
//默认请求是get

2）发送带参请求

a、直接拼接
axios({
  url:'http://192.168.1.1:800/home/data?type=sell&page=3'
}).then(res=>{
  console.log(res)
})

axios({
  url:'http://192.168.1.1:800/home/data',
  params:{
    type: 'pop',
    page: 1
  }
}).then(res=>{
  console.log(res)
})
b、多请求协作

1、方式一：写一个函数同意处理二个请求的返回结果。

2、axios发送并发请求

//这个属性可以全局
axios.defaults.baseURL = 'http://123.207.32.32:8000'

//一个方法内部传入数组，数组里面，传递axios对象。then处理请求返回的数据
axios.all([axios({
    url:'/home/multidata'
}),axios({
    baseURL: 'http://123.207.32.32:8000',
    url:'/home/data',
    params:{
        type:'sell',
        page: 4
    }
})]).then(results =>{
    //处理返回内容
    console.log(results)
})

返回结果处理

//对多个返回对象做分割，单独取出来。
.then(axios.spread((res1,res2)=>{
	console.log(res1);
    console.log(res2);
}))
c、对象的解构
//对象解构
const obj = {
name:'kobe',
age: 30
}
const {name,age} = obj;

//数组解构
const names = ['why','kobe','james']
const [name1,name2,name3] = names;
d、axios全局配置
//全局配置访问路径
axios.defaults.baseURL = 'http://123.207.32.32:8000'
//超时时间
axios.defaults.timeout = 5000

在这里插入图片描述

3）、创建axios实例，实例独立配置axios参数

概述：为了满足多个请求地址，创建实例

const instance1 = axios.create({
baseURL: 'http://222.111.22.33:8000',
timeout: 5000
})

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

instance1({
  url:'/home/multidata',//基于baseURL请求的接口
  params: {
      type:'pop',//传递的参数，这个参数会跟随url传递。
      page: 1
  }
}).then(res =>{
	console.log(res)
})

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

4）、封装axios网络请求

1、根据生命周期来发送网络请求

HelloWorld.vue
<template>
	<h2>{{categories}}</h2>
-------------------------------
	<HelloWorld></HelloWorld>//调用模板
</template>
<script>
    //导入axios网络请求
 import axios from 'axios'
    //导入组件
    import HelloWorld from './components/helloWorld'
    export default {
        name: "HelloWorld",//设置模板导出名称
        componrnt: {
            HelloWorld//模板组件 申明
        },
        data(){//设置数据域
            return {
                categories: ''
            }
        },
        created(){//当这个组件被创建的时候发起网络请求
            axios({
                url: 'http://123.11.21.32:8000/category'
            }).then(res => {
                this.categories = res;//接受请求返回的对象
            })
        }
    }
</script>

缺点：网络耦合度太高，后期框架维护缺陷。

1、新建request.js
#request.js

import axios from 'axios'

export function request(config,succes,failure){
	//1.创建axios的实例。
    const instance = axios.create({
        baseURL: 'http://123.203.32.32:8000',
        timeout: 5000
    })
    //发送真正的网络请求
    instance(config)
        .then(res =>{
        console.log(res);
        success(res);//通过这个函数，把返回结果回调出去。
    })
   .catch(err =>{
        console.log(err);
        failure(err)//通过这个函数把，返回的东西回调出去。
    })
}

export function instance2(){

}
2、使用request.js封装的axios模块
#main.js
import {request} from "./network/request";//这种方式，是导入的某个js文件的，函数。大括号里面的是函数名称。
request({
    url: '/home/multidata'
},res =>{
    console.log(res)
},err =>{
    failure(err)
})
//request()有三个参数，config,success,failure
//
//
//
//
//
3、封装request函数只传一个参数
#main.js

import {request} from "./network/request"

request({
    baseConfig: {
        
    },
    success: function(res){
        
    },
    failure(err){
        
    }
})

4、promise封装axios的request.js

#request.js

import axios from 'axios'

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

#main.js

import {request} from "./network/request"


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

5、直接return axios

#request.js


import axios form 'axios'
export function request(config){
    const instance = axios.create({
        baseURL: 'http://123.21.12.12:8000',
        timeout: 5000
    })
    return instance(config)//create函数本身返回的是promise调用的时候。request可以直接.then.catch
}

#main.js

import {request} from "./network/request"

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

三、axios拦截器

1、拦截内容

（1）请求拦截

instance.interceptors.request.use(
config =>{
console.log('来到了request拦截success中');
return config
},
err=>{
console.log('来到了request拦截failure中')；
return err
}
)

（2）响应拦截

instance.interceptors.response.use(
    response => {
    console.log('来到了response拦截success中');
    return response.data
},
    err =>{
        console.log('来到了response拦截failure');
        return err
    }                              
)

2、拦截器使用

#request.js


import axios form 'axios'
export function request(config){
    //1.创建axios的实例
    const instance = axios.create({
        baseURL: 'http://123.21.12.12:8000',
        timeout: 5000
    })
    //2.axios的拦截器，全局拦截
    //axios.interceptors
    //拦截局部实例,拦截请求
    //2.1、请求拦截的作用
    instance.interceptors.request.use(
    	aaa/config =>{
           console.log(config);
            //这里面可以做的事情
            //1、比如config中的一些信息不符合服务器的请求
            //2、比如每次发送网络请求时，都希望在界面中显示一个请求的图标
            //3、某些网络请求（比如登录（token）），必须携带一些特俗信息
            //
            //    
        },
        err=>{
		   console.log(err)
        }
    );
    //2.2、拦截响应
    instance.interceptors.response.use(
    	res =>{
            console.log(err);
            return res.data;
        },
        err=>{
            console.log(err)
        }
    );
    //3.发送真正的网络请求
    return instance(config)//create函数本身返回的是promise调用的时候。request可以直接.then.catch
}
vue前端请求api的几种方法
bjzhang75的博客
05-05 996
vue前端请求api的几种方法
如何在Vue3中使用axios实现数据请求？
最新发布
jnfy的博客
08-30 922
Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。Axios 是一个基于 Promise 的 HTTP 客户端，它可以用于发送异步 HTTP 请求到 REST 终端并执行各种 CRUD 操作。在 Vue 3 中，我们可以很方便地使用 Axios 进行数据请求，从服务器获取数据并在界面中显示。
Vue中Axios封装API接口的思路及方法
热门推荐
yiwai6998的博客
10-07 1万+
一、axios的封装 在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。 在一个项目中我们如果要使用很多接口的话，总不能在每个页面都写满了.get()或者.post()吧？所以我们就要自己手动封装一个全局的Axios网络模块，这样的话就既方便也会使代码量不那么冗余。 安装 > npm install axios //这个就是
Vue中Axios使用详解
小猿同学628的博客
07-07 5193
目录 Axios介绍 Axios安装 Axios二次封装 1. Axios介绍 什么是 axios？ Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性 从浏览器中创建 XMLHttpRequests（和原生的Ajax相同都是基于XMLHttpRequest（）对象的二次封装） 从 node.js 创建 http 请求（可以在Node环境中配合Express()使用实现异步的数据交互） 支持 Promise API（Axios是基于Promise
vue封装axios请求api
Helloxd020406的博客
02-28 539
# 1 先创建utils文件创建http.js和requset.js文件 在创建一个api文件创建任意js文件 index.js 然后下载安装axios 在http.js文件中写入代码如下 js文件中写入代码如下 ``` import axios from "axios"; const http = axios.create({ baseURL: "/api", timeout: 10000 }) // 请求拦截 http.interceptors.r...
vue 请求api一行_.vue文件怎么请求api
weixin_42499332的博客
01-17 363
.vue文件怎么请求api1、首先我们安装axios网络请求库cd test // 进入项目根目录npm i axios -S // 执行安装2、在需要使用请求的vue组件内，引入axios请求示例// 引入axiosimport axios from 'axios'export default{created() {// 发送请求axios.get('http://localhost/api.p...
vue脚手架——axios
03-30
Vue脚手架——axios Vue.js 是一套构建用户界面的渐进式框架，它的官方网址是 https://cn.vuejs.org/index.html。Vue.js 将必要的页面元素的相关属性（例如页面元素的样式、控件的值、页面元素的事件等）与数据进行...
vue第四天笔记02——axios请求中的例子
08-21
本篇笔记将深入探讨如何在Vue项目中使用axios进行API请求，同时结合实例——模仿王者荣耀官网的选项卡功能，来具体展示axios的应用。 首先，我们要了解axios的基本用法。axios是一个基于Promise的HTTP库，可以在...
Vue2 工程创建——axios获取后台数据
weixin_46966741的博客
04-20 716
vue.config.js 文件夹下 添加属性lintOnSave: false, // eslint-loader 是否在保存的时候检查。1. 在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。是否安装成功：vue -V。1.安装 npm install --save axios。2.1系统环境变量配置： 路径与安装node盘符对应。（node缓存）位置，放在node安装文件下。node -v 查看node版本。一、node安装与环境变量配置。
Vue——封装axios请求，请求头携带token、cookie，当请求超时再次发送请求
ygkyufcl的博客
03-25 2287
utils/request.js import axios from "axios"; const instance = axios.create({ timeout: 8000,//设置网络请求超时时间 baseURL: "http://0.0.0.0:0000" ,//接口的baseUrl headers: { "Content-Type": "application/x-...
Vue中如何进行API请求及如何处理异步操作？
有我更精彩的博客
03-26 662
当我们开发一个基于Vue的前端应用时，经常需要通过API请求获取数据并处理异步操作。Vue提供了许多便捷的方法来实现这一目的
前端 封装axios接口调用api
shiyi_ersan的博客
03-08 153
vue封装axios
【前端学习日记】axios请求数据和响应数据
qq_54207312的博客
05-24 848
先附上axios中文文档，英文文档太过具体了，经常进不去。 axios中文文档|axios中文网 | axios 常用api(增删改查)：get（查询数据） post(新增数据) put(修改数据) delete(删除数据) ----对应数据库的增删改查 两种基本使用方式：对象式、函数式 对象式： 函数式： 注意： ① 函数式里面设置了一个全局axios默认值，所有后面所有请求的配置url都是写的相对地址，在发起请求时会自动补全地址。 ② 前端用的最...
部门前端：编写请求API
Leon_Jinhai_Sun的博客
12-28 233
import Vue from 'vue' import 'normalize.css/normalize.css'// A modern alternative to CSS resets import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import '@/styles/index.s...
VUE中使用 axios 访问 API
躺赢啊
01-08 492
有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。 ...
Vue(axios)发送网络请求调取API并展示数据
m0_66403070的博客
04-22 2254
Vue(axios)发送网络请求调取API并展示数据
在vue中使用axios访问API
2301_76379381的博客
04-09 1007
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
前端模拟请求api文档
keyro的博客
12-22 348
前端模拟请求api文档1.0 URL： https://yzalliance.top/RequestTestTool/testRequest 请求类型：GET/POST 请求参数： 参数名 必须 默认值 说明 RType 否 0 0：返回json对象，1：返回文本 RTime 否 100 延迟响应时间（ms） RData 否 NULL 如果值为NULL时返回请求的参数信息，否则返回RData的内容 返回格式（json）： {"requestType":"GET","RType":
vue 请求多个api_vue请求api
weixin_39732027的博客
12-21 525
axiosaxios可以在vue应用中访问一个 API 并展示其数据，是封装的ajax。在使用axios前，需要先引入axios.js使用axios获取信息使用axios的get方法请求api并获取数据// 全局axiosVue.prototype.$axios = axiosvar vm = new Vue({el:'#app',data:{list:[]},methods:{getProduc...
Vue项目封装工具——axios与elementUI集成教程
在当前的IT行业中，前端开发已经成为不可或缺的一部分，而Vue.js作为一个流行的前端JavaScript框架，受到了广大开发者的青睐。它以简洁、灵活、组件化的特点获得了广泛的应用。在开发Vue项目时，经常会用到第三方库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值