一、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传参