Axios

在vue中建议使用axios 插件来实现异步请求
该插件基于promise

第一节、安装

npm i  axios  (定位到项目的根目录)

第二节、 使用

import axios  from 'axios'
//如果是get提交
let promise对象=axios({
	url:"",
	method:"get",
	//提交参数
	params:{
		
	}
})
//如果是post提交
let promise对象=axios({
	url:"",
	method:"post",
	//提交参数
	data:{
		
	}
})

第三节、 axios的封装

目录结构:

src
	http目录
		modules目录  -->分模块
			users.js  --->具体的请求
			stus.js  --->具体的请求
			clas.js  --->具体的请求
		axios.js ---》封装了自己的axios
		http.js -->合并modules目录中所有的模块
		main.js-->配置全局属性http，方便以后在任意组件中通过this.即可使用

axios.js

//引入axios
import axios from 'axios'
//配置
let newaxios= axios.create({
    //配置前缀路径,以后真正发请求时直接用/就能够代表http://localhost:3000
    baseURL:"http://localhost:3000",
    //配置超时，如果服务器超过3秒未响应，则直接报错，给客户一个回顾
    timeout:3000
})
//axios提供了两个拦截器，一个是拦截请求，一个是拦截响应
//拦截响应：服务器响应数据了，拿到数据后立马被拦截，我们能够在拦截中写自己业务(比如过滤数据)
newaxios.interceptors.response.use(config=>{
    // 响应数据正常时进入该方法
    console.log("config",config);
    //在请求对象中的请求头属性中挂载token
    config.headers.Authorization=localStorage.token
    //放行
    return config.data
},err=>{
    console.log(err);
    //后台报错，响应出问题时进入该方法 （捕获异常   ）
})
//拦截请求:在发送请求之前会被拦截，我们能够在拦截中写自己业务
//暴露
export default  newaxios;

users.js

import axios from '@/http/axios.js'
//验证账号是否存在
 function checkUserNameIsExists(params){
     return axios({
        url:"/users/checkUserNameIsExists",
        params
    })
}
//注册
function register(data){
    return axios({
        url:"/users/register",
        method:"post",
        data
    })
}
//登录
function login(params){
    return axios({
        url:"/users/login",
        method:"get",
        params
    })
}
//暴露
export default {
    checkUserNameIsExists,register,login
}

http.js

//合并所有模块
import  users from './modules/users.js'
// import  clas from './modules/clas.js'
// import  stus from './modules/stus.js'
//暴露
export default {
    users,
    // clas,
    // stus
}

main.js

//引入http
import http from '@/http/http.js'
//把http模块注入到Vue原型链中 (配置全局属性)
//$http自定义名字
Vue.prototype.$http=http

vue：

            let res=await this.$http.users.register(this.form)
            if(res.code==200){
                alert("注册成功")
            }else{
                alert("注册失败")
            }

处理401问题

//引入element的消息框
import { Message } from 'element-ui';
//引入路由对象
import router from '@/router'
//拦截响应：服务器响应数据了，拿到数据后立马被拦截，我们能够在拦截中写自己业务(比如过滤数据)
newaxios.interceptors.response.use(config=>{
    // 响应数据正常时进入该方法
    // console.log("config",config);
    //放行
    return config.data
},err=>{
    if(err.response.status==401){
        // Message({
        //     message:"请登录",
        //     type:"warning"
        // })
        Message.warning("请登录")
        //跳转
        router.push("/login")
    }else if(err.response.status==400){
        //以后针对不同的错，给客户不同的提醒
    }
   
    //后台报错，响应出问题时进入该方法 （捕获异常   ）
})