vue中axios的使用(vue axios.all)

编辑：rootadmin

vue中axios的使用 1.什么是axios

推荐整理分享vue中axios的使用(vue axios.all)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue axios.all,vue-axios和axios,vue-axios是什么,vue axios.all,vuex中使用axios,vue-axios是什么,vue-axios详细介绍,vue-axios详细介绍,内容如对您有帮助，希望把文章链接给更多的朋友！

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

2.axios本质上也是对原生XHR的封装，只不过是promise的实现版本

3.用来向后端发送http请求，获取后端发送的数据

2.怎么在vue项目中使用axios

1.安装axios

npm install --save axios

2.axios二次封装

对axios进行二次封装主要是为了设置请求拦截器（在请求发出之前做一些事情）和响应拦截器（在数据返回之后，做一些事情）

假如我的请求的接口如下：http://219.199.230.250/local/user/login

（1）建立以下文件夹和文件，在axios.js中进行axios的二次封装，代码如下

//对于axios进行二次封装import axios from "axios";//底下的代码也是创建axios实例let requests = axios.create({ //基础路径 baseURL: "/local", //请求不能超过5S timeout: 5000,});//请求拦截器（可以在请求发出去之前，做一些事情）requests.interceptors.request.use((config) => { return config;});//响应拦截器（在数据返回之后，做一些事情）requests.interceptors.response.use( (res) => { //相应成功 return res.data; }, (err) => { //响应失败 alert("服务器响应数据失败"); });export default requests;

注释：由于我的接口的路径前面都是带有/local的，所以这baseURL设置的是/local

（2）在index.js中设置具体的接口

import requests from "./axios"; //引入二次封装的axiosexport const login = (params)=>requests({url:'/user/login ',method:'post',data:params});

（3）配置代理服务器

由于浏览器的同源策略，前端直接向服务器发送请求时会产生跨域问题，所以可以配置一个代理服务器去转发前端的请求，因为服务器和服务器之间不会产生跨域问题。

在vue.config.js中添加以下代码

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, devServer: { //配置代理服务器 proxy: { "/local": { target: "http://218.197.228.251", }, },},})

将路径的前面带有local的请求转发到地址为http://218.197.228.251的服务器上

（4）接口的调用

3.如何使用axios发送各种请求

1.将参数拼接到路径后面，以params的形式，或者不用携带参数

export const login = (data)=>requests({url:'/user/login '+data,method:'get'});

模板字符串写法

export const login = (data)=>requests({url:'/user/login',method:'post',data:data});

2.在body中携带参数

export const login = (data)=>requests({url:'/user/login',method:'post',data:data});

3.将参数拼接到路径后，以query参数的形式

export const login = (params)=>requests({url:'/user/login',method:'get',params:params});

此时调用的参数会以qurey的形式拼接到路径后面