Axios的封装及使用

一、axios请求数据：

最常用的请求工具
优点：
1、它是基于Promise封装的，用起来非常方便，解决回调地狱问题。
2、它在客户端，node.js服务器都可以进行使用

使用：
1、安装：npm install axios -S

2、进行axios封装，
在src下新建utils文件夹，新建fetch.js文件（名字随便）然后写代码

请求拦截器
响应拦截器

// 1、引入 axios
import axios from 'axios'

// 2、创建一个 axios 的实例对象
let baseURL_dev=""  //开发环境的url地址
let baseURL_pro=""  //上线后公司域名utl地址
let baseURL_test="" //内网地址，测试环境url地址

const instance = axios.create({
// 基准路径
baseURL: 'baseURL_dev',//3、设置开发域名
//4、 超时时间的设置 ms
timeout: 5000，
headers：{
 “Content-Type”: "application/json;charset=UTF-8"
 } //5、携带过去的请求头
})

// 6、添加请求拦截器
instance.interceptors.request.use(
config => {
// 在发送请求之前做些什么
做鉴权token
config.headers.Authorization=localStorage.getItem("token") || ""
return config //相当于next()放行，config是个对象，里面包含请求的所有信息。
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)

//7、 添加响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据做点什么
 //这里能获取到请求回来的数据，这里判断是否请求成功
if(response.data&&response.data.success) {
  retrun response.data.data //成功的时候将数据返回出去
}else{
  console.log("网络请求失败)
}
},
error => {
// 对响应错误做点什么
return Promise.reject(error)
}
)

// 暴露这个实例
export default instance

3、进步一封装：

在src目录下新建：api文件 api.js

import fetch from '../utils/fetch' //引入封装好的axios，（util下的fetch.js）

export function getwb(params) { //暴露一个函数，再返回一个封装好的axios
    return fetch({
        url: '/wbcomic/home/page_recommend_list',
        method: 'GET',
        params //GET传参是params，POST传参是data，传错会得不到数据
    })
}
export function a(params) {
    return fetch({
        url: '/comic_v2/getproad',
        method: 'GET',
        params
    })
}
export default{ //再次暴露出去，两种方法暴露，方便引用
    getwb,
    a
}

注：传参数data是请求体参数，params是查询字符串参数

4、同一做处理，挂载到vue的原型中

import Vue from 'vue' //引入核心
import App from './App.vue' 
import store from './store/index'//引入store
import router from './router/index' //引入路由
import http from './api/api.js' //将api封装的方法引入到这里进行全局挂载
Vue.prototype.$http = http//将api封装好的axios挂载到prototype上去，全局使用
Vue.config.productionTip = false

new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

5、页面上使用就直接引入

页面调用直接this.$http.api定义的方法（传参数）.then()

 mounted () {
     let data = {
        apptype: 8,
        appversion: 1.0,
        channel: 'web-app',
        adgroupid: 123
      }
      this.$http.a(data).then((res) =>{
        console.log(res,'fn2数据')
      })
    console.log(this.$store)
  }

4、传参：
data是POST传参
params是GET传参