vue安装axios

全栈程序员-站长 • 2025年8月15日上午9:22 • 未分类 • 阅读 3

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

1、安装

npm install axios --save

Jetbrains全家桶1年46，售后保障稳定

2、在main.js中写入一下代码

import axios from 'axios'
Vue.prototype.axios = axios

3、调用

下面源码是直接使用axios来调用后台的接口示例：

this.axios({
  url: '',//请求地址
  method:'POST',//请求方法
  responseType: 'json',//返回值类型
  params: {
    arg1: "arg1"//请求携带参数
  }
}).then(res => {
  console.log(res)//请求成功
}).catch(error => {
  console.log(error);//请求失败
})

使用拦截器—添加

在src创建util目录，在里面创建request.js文件

import axios from 'axios';

const service = axios.create({
	baseURL: "http://127.0.0.1:8080/projectName",//请求地址前缀
	timeout: 0
});

// 请求拦截器
service.interceptors.request.use(
	config => {
   //添加请求头部参数
		config.headers['arg1'] = "arg1Value";
		return config;
	},
	error => {
		return Promise.reject(error);
	}
);

// 响应拦截器
service.interceptors.response.use(
	response => {
		//拦截到成功的数据
	  	return response.data;
	},
	error => {
		//拦截到失败的数据
		return Promise.reject(error);
	}
);

export default service;

在src创建api目录，在里面创建user.js文件

import request from '@/utils/request'; //引入request.js

export function getUserInfo(data) {
	return request({
		url: 'userController/getUserInfo',
		method: 'post',
		data: data
	});
}

4、Vue页面调用拦截器

<template>
    <div>
        <h1>{
  
  {userInfo}}</h1>
    </div>
</template>

<script> //引入api import { 
      getUserInfo } from './api/user.js'; export default { 
      date(){ 
      return{ 
      userInfo: { 
     } } }, mounted(){ 
      const par = { 
     arg1: "arg1Value"}; //调用api getUserInfo(par).then(re=>{ 
      //请求成功 返回re this.userInfo = re.data; }).catch(err=>{ 
      //请求失败 }) } } </script>