Axios-526互联

axios.get('url地址',
{params:{
    参数1：值1,
    参数2：值2}
}).then(function(response){
    console.log(response);
}).catch(function(error){
    console.log(error);
})

axios({
   method:"get"，
   url:"url地址",
   params:{
       参数1：值1,
       参数2：值2
   }
}).then(function(response){
    console.log(response);
}).catch(function(error){
    console.log(error);
})

axios.post('url地址',
{
    参数1：值1,
    参数2：值2}
).then(function(response){
    console.log(response);
}).catch(function(error){
    console.log(error);
})

axios({
   method:"post"，
   url:"url地址",
   data:{
       参数1：值1,
       参数2：值2
   }
}).then(function(response){
    console.log(response);
}).catch(function(error){
    console.log(error);
})

Axios执行多个并发请求

axios.all([
axios.get(url1),
axios.get(url2),
axios.get(url3)
]).then(
axios.spread((res1, res2, res3)=>{
console.log(“个人信息”，res1);
console.log(“好友列表”，res2);
console.log(“战绩情况”，res3);
}))

创建Axios实例

let instance1=axios.create({
　　baseURL：’http://127.0.0.1:8080’，
　　timeout：1000，
　　method:"post/get/put/patch/delete"，
　　headers:[token:"身份令牌"],
　　data：{}，
　　params:{}
})
let instance2=axios.create({
　　baseURL：’http://127.0.0.1:9090’
　　timeout：5000
})

instance1.get(“接口地址1”).then(res=>{
　　console.log(res)
})
instance2.get(“接口地址2”).then(res=>{
　　console.log(res)
})

拦截器

//请求拦截器
axios.interceptors.request.use(config=>{
　　//发送请求前做处理
　　return config
},err=>{
　　//在请求错误时处理
　　return Promise.reject(err)
});

//响应拦截器
axios.interceptors.response.use(res=>{
　　//请求成功后对响应数据进行处理
　　return res
},err=>{
　　//响应数据出错后做处理
　　return Promise.reject(err)
});

Axios封装

在src/utis下创建request.js

import axios from 'axios'
import router from '../router'

export default function request(config){
    const req=axios.create({
        baseURL:"http://114.67.241.121:8088",
        timeout:5000
    })
    //添加请求拦截器
    req.interceptors.request.use(config => {
        const token = sessionStorage.getItem('token')
        if(token){
            config.headers.Authorization = token
        }
        return config
    })
    //添加响应拦截器
    req.interceptors.response.use(response => {
        if (response.data.code == "209") {
            sessionStorage.removeItem("token");
            sessionStorage.removeItem("username");
            console.log("登录已超时，请重新登录");
            router.push("/").catch(err => {
                console.log(err);
            });
        } else {
            return response.data
        }
    })
    return req(config)
}

在src/api下创建webapi.js

import request from '../utils/request'

export default function userlogin(data){
    return request({
        method:"post",
        url:"/user/login",
        params:data
    })
}
export function getStuList(){
    return request({
        method:"get",
        url:"/stu/list",
    })
}
export function addStu(data){
    return request({
        method:"post",
        url:"/stu/add",
        data:data,
    })
}

login.vue中

import userlogin from '../api/webapi.js'

index.vue中

import {getStuList,addStu} from '../api/webapi.js'