[JavaScript知识库]vue框架简单封装api

在vue根目录先执行下载axios

npm install axios --save

在src 目录下创建 utils/request.js

//request.js
import axios from "axios";
const instance = axios.create({
    //接口域名
    baseURL: "http://****:8080",
    timeout: 5000, //表示请求超过时间
    headers: {},
});

//请求拦截
instance.interceptors.request.use(
    function (config){
        //这里添加token验证
        if (token是否存在){
            config.headers.authorization=`token号`;
        }
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
)

//响应拦截
instance.interceptors.response.use(
    function (response){
        return response.data;
    },
    function (error){
        return Promise.reject(error);
    }
)

//封装get请求 axios.get(url,{params:params})
export const get = (url, params) => instance.get(url, { params });
//封装post请求 axios.post(url,{name:'阿边',age:23})
export const post = (url, data) => instance.post(url, data);
//封装删除接口
export const del = (url, params) => instance.delete(url, { params });
//封装修改接口
export const put = (url, data) => instance.put(url, data);
//export default instance;

在src下创建 api目录。此目录下放接口api

例: src下创建 api/user.js

import {get,post} from "../utils/request";

//登陆
export const login = (data)=>get('/api/login',data);
export const getUserInfo = (data)=>post('/api/getuser',data)
export const delUser = (data)=>del('/api/delUser',data)
export const upUser = (data)=>put('/api/upuser',data);

在模块中使用： pages/user.vue

<template>
<div id="user">
</div>
</template>
<script>
import { login, getUserInfo, delUser , upUser } from "@/api/user";
export default {
data(){
	return {
		token:'',
		userInfo:'',
		}
	},
	//组件创建 生命周期
	created(){
	this.getuser();
	this.login();
	},
	//方法
	methods:{
	async login(){
			let result = await login({phone:'188888888',password:'111111'});
			if(result.status === 200){
			this.token = result.token;
			}	
		},
		getInfo(){
			getUserInfo({'token':''}).then(res=>{
					console.log(res)
				})
			},
	},
	//TODO 
}
</script>
<style scoped>
</style>

超强干货来袭

云风专访：近40年码龄，通宵达旦的技术人生