VUE_vue脚手封装公共api-请求拦截如何使用，vue+axios请求封装

超、凢脫俗 2023-02-28 12:51 12阅读 0赞

#### 1.根目录创建文件 ####

utils/article.js  
utils/request.js  
可以创建在不同文件夹下，引入的时候引入相应文件就可以

#### request.js ####

需要安装axios库

> npm install axios -S

import axios from 'axios';
    
    axios.defaults.baseURL = 'http://127.0.0.1/';		//公共请求地址
    
    //请求拦截器 interceptors拦截器
    axios.interceptors.request.use(function(config){ 
    	//发送请求前
    	//config.headers['token'] = "123"; //请求前给请求头加token
    	return config
    },function(error){ 
    	//请求错误
    	return Promise.reject(error)
    	//console.log(error)
    });
    
    //响应拦截器
    axios.interceptors.response.use(function(response){ 
    	//响应数据
    	// console.log(response)
    	return response
    },function(error){ 
    	//响应数据错误
    	return Promise.reject(error)
    	// console.log(error)
    });
    
    export default axios;  //直接返回axios

#### article.js ####

import request from '@/utils/request';
    //第一种写法 有参数则传递参数，没有参数可以不写
    export function list(data){ 
    	return request.get('contract/list',data);
    }
    //第二种写法
    export function list(data){ 
    	return request({ 
    		method:'get',
    		url:'contract/list',
    		data
    	})
    }

#### 页面使用 ####

<script>
    import { list} from '@/utils/article.js'
    export default { 
    	data(){ 
    		return{ 
    		}
    	},
    	created() { 
    	},
    	methods:{ 
    		li(){ 
    			list().then(res=>{ 
    				console.log(res)
    			})
    		}
    	}
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，12人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 封装api请求

目录 1，封装API请求步骤 2，uni-app封装api请求改进 1，封装API请求步骤在uni-app中封装API请

水深无声/ 2023年10月15日 18:16/ 0 赞/ 22 阅读

相关请求方法封装

const BASE\_URL = "http://192.168.1.57:8080/api/"; // 获取储存的子女姓名 const childrenName = u

古城微笑少年丶/ 2023年09月23日 15:32/ 0 赞/ 112 阅读

相关 uni-app项目请求封装 - 请求拦截器

uni-app项目请求封装 - 请求拦截器由于最近公司需要开发移动端，于是我选择了uni-app，之前因为没什么时间一直都没有对请求进行封装所以今天当做经验积累吧

痛定思痛。/ 2023年07月18日 12:44/ 0 赞/ 6 阅读

相关 vue请求封装

[https://segmentfault.com/a/1190000016146893][https_segmentfault.com_a_1190000016146893]

逃离我推掉我的手/ 2023年06月18日 02:52/ 0 赞/ 9 阅读

相关 VUE_vue脚手封装公共api-请求拦截如何使用，vue+axios请求封装

1.根目录创建文件 utils/article.js utils/request.js 可以创建在不同文件夹下，引入的时候引入相应文件就可以 request.

超、凢脫俗/ 2023年02月28日 12:51/ 0 赞/ 13 阅读

相关 axios 二次封装、请求拦截、响应拦截

实际开发中，直接用axios的api方法比较麻烦，二次封装一下，要好用很多请求拦截：就是调接口之前，可以添加一些请求配置，headers token等等响应拦截：就

骑猪看日落/ 2021年09月19日 00:12/ 0 赞/ 645 阅读

相关 vue中使用axios时封装公共方法（响应拦截器，请求拦截器）

npm install axios --save //安装依赖与main.js平行处创建http.js文件 import axios from

古城微笑少年丶/ 2021年09月01日 07:58/ 0 赞/ 533 阅读

相关 uniapp 公共方法封装公共请求封装

一般我都习惯把公共js封装到util这个文件夹下常见的的方法，手机号验证，邮箱验证等方法我都会写到util下的util.js里目录： ![20201117155628

男娘i/ 2021年07月24日 20:05/ 0 赞/ 1537 阅读

相关 uniapp自己封装请求拦截

request.js export function packRequest(obj){ let { url, method, params, da

Love The Way You Lie/ 2021年07月24日 17:13/ 0 赞/ 931 阅读

相关 mpvue请求封装

postGet.js //请求接口的域名 const host = 'http://localhost/mpvue/php/' funct

绝地灬酷狼/ 2021年07月24日 11:31/ 0 赞/ 467 阅读