axios请求

1.常见的引入axios的方法：

（1）将$http挂载到Vue原型对象上

//引入axios
import axios from 'axios'
Vue.prototype.$http=axios

使用baseURL的好处：方便后期维护，后期改变端口号，不用逐一去修改，只用在baseURL中修改即可：

axios.defaults.baseURL=`http://127.0.0.1:8888/api/private/v1/`
//接口基准地址:http://127.0.0.1:8888/api/private/v1/ （来自接口文档）

利用axios请求后台数据格式：

根据后台响应的数据 状态码来判断接口是否请求成功

 

const { data: res } = await this.$http.post("login", this.formList);
//请求失败
if (res.meta.status !== 200) {
          console.log(res.meta.status);
         return this.$message.error("更新失败");
        }
//请求成功
this.$message.success("更新成功"); 

（2）不挂载原型对象引入axios（查看axios中文网）

// 引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

 添加拦截器：

拦截器的作用：

除登录注册请求接口的请求头不需要携带token之外，其他接口请求数据均需要携带token请求头

拦截器将登陆成功的保存在session中的token添加至请求头中，后面每次请求都不用单独设置了

此处的token_要根据登录时保存的token来对应。

存储token：

window.sessionStorage.setItem("token_", res.data.token);

取token： 

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 获取token 如果没有就先获取getItem 然后添加到请求头里面
  let token_=window.sessionStorage.getItem('token_') //此处的token_要根据登录时保存的token来对应
  if(token_){
    config.headers['token']=token_
    // 返回加强后的config
    return config;
  }
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

该方法请求后台数据：

this.axios.get('http://localhost:3000/sliderbar').then(res=>{
    console.log(res);
    this.list=res.data.list;
})

利用async和await：

const {data:res}=await this.axios.get('http://localhost:3000/sliderbar')