axios封装学习

基本的调用数据格式：

axios({

url:'',

method:'get',

params:{}

}).then(res=>{})

封装：

创建相应js文件request.js与api.js

request.js文件用来做拦截

//引入axios

import axios from "axios";

//创建一个单例（实例）

const instance=axios.create({

baseURL="http://www.baidu.com",

timeout:4000

})

//拦截器——请求拦截

// instance.interceptors.request.use(callback,callback)第一个参数代表成功，第二个参数代表失败

instance.interceptors.request.use(config=>{

//需求一 部分接口需要拿到token

let token = localStorage.getItem('token');

if(token){

config.headers.token=token;

}

//无任何需求直接返回下句即可

return config;

},error=>{

return Promise.reject(err)

})

//拦截器——响应拦截

instance.interceptors.response.use(res=>{

return res;

},error=>{

return Promise.reject(err)

})

//整体导出

export default instance

api.js

//将request.js整体导入

import request from "./request";

//按需导出每个请求，也就是按需导出每个api

//请求首页数据

export const GetHomeAPI = (params) => request.get("/index/index", { params });

//登录

export const PostLoginAPI = (params)=> request.post("/auth/loginByweb", params);

页面中实际调用

//原调用模式

axios.get("http://baidu.com/index/index").then(res => {

console.log("res", res);

});

//现调用模式

//先引用

import { GetHomeAPI, PostLoginAPI } from "@/request/api.js";

//调数据

GetHomeAPI().then(function(res) {

console.log(res);

});

PostLoginAPI({ name: "a", pws: 123 }).then(function(res) {

console.log(res);

});