vue项目中axios封装api请求方式二-移动开发

一，axios封装request请求，并封装api请求接口的方式在vue项目目录scr 下新建 network目录再新建request .js文件//request .js 文件// 引入axios请求库import axios from axios// 封装Promise实例 export f...

一，axios封装request请求，并封装api请求接口的方式

在vue项目目录scr 下新建 network目录再新建request .js文件

//request .js 文件
// 引入axios请求库
import axios from 'axios'
// 封装Promise实例 
export function request (config) {
    // 1.创建axios实例
    const instance = axios.create({
      // 1.1定义统一的请求地址
      baseURL: 'https://autumnfish.cn/',
      // 1.2定义统一的请求超时设置
      timeOut: 5000
    })
    
    // 2.1添加请求拦截器
    instance.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      console.log(config);
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });

    // 2.2添加响应拦截器
    instance.interceptors.response.use(function (response) {
      // 对响应数据做点什么
      console.log(response);
      return response;
    }, function (error) {
      // 对响应错误做点什么
      return Promise.reject(error);
    }); 

    // 3 发送真正的网络请求
    // 由于instance实例本身返回的就是promise实例 
    // 再调用的时 也就可以使用.then() 拿到成功的 .catch() 返回值失败的返回值
    return  instance(config)
   
}

// api请求接口文件

//引入axios封装的request请求 
import {request} from './request'

// 第一种写法 写好固定的地址接口 和参数 
export function getSwiper() {
  return request({
    url: '/banner?type=1',
    // params: {
    //   type: 1
    // }
  })
}
// 第二种写法 传递地址接口参数过来
export function getRecommend(params) {
  return request({
    url: params
  })
}
// 第三种写法 传递整个对象参数过来
export function getRecommend(params) {
  return request({
    url: params.url,
    params: params.data
  })
}
// post请求方式 此处的参数名是data而不是params 调用方式跟第三种写法 get请求一样，
// 注意:官方规定
// get请求 参数名使用 params
// post等其他请求 参数名基本使用 data 如下：
// export function getRecommend(params) {
//   return request({
//     url: params.url,
//     data: params.data
//   })
// }

在组件中调用请求，此处只展示script，替它的template，style已省略，可自行添加测试

<script>
// 引入api请求接口文件
import { 
  getSwiper,
  getRecommend
} from '../../network/home';

export default {
  name: 'Recommend',
  data () {
    return {
      banners:'',
      recommend:'',
      hotlist: ''
    }
  },
  components:{ },
  created() { 
  	// 第一种 调用
	getSwiper().then(res =>{
	  console.log(res);
	  this.banners = res.data.banners
	})
	
	// 第三种 调用 (参数比较少时)
	getRecommend('/personalized?limit=5').then(res =>{
	  console.log(res);
	  this.recomlist = res.data.result
	})
	
	// 第三种 调用 (参数很多时)
	getRecommend({
	  url: '/playlist/detail',
	  data: {
	    id: 19723756,
	    // limit: 10,
	    // key: 'lzx'
	  }
	}).then(res =>{
	  console.log(res);
	  this.hotlist = res.data.playlist.tracks
	})      
  },
  methods:{ }
}
</script>

二，request请求到挂载全局使用的方式

在保证request请求文件的基础上实现

request文件（参考章首）
在maim.js中引入request文件，挂载到vue原型链上
在需要使用的地方，使用this.$request()调用即可

可以参考如下代码便于理解：

// 2. main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import Vant from 'vant';
import 'vant/lib/index.css';
// 2.1 引入request文件
import { request } from './network/request';

import APlayer from '@moefe/vue-aplayer';
Vue.use(APlayer);
Vue.use(Vant);
// 2.2 挂载到vue原型链 全局使用（避免每次使用引入）
Vue.prototype.$request = request

Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.在组件中不用导入，就可以调用请求

<script>
export default {
  name: 'test',
  data () {
    return {
      infoList: ''
    }
  },
  components:{ },
  created() { 
  	// 页面初始化时调用
	this.$request({
	  url: '/personalized?limit=10'
	  }).then( res =>{
	    console.log(res);
	    this.recomlist = res.data.result
	}) 
  },
  methods:{ 
  	// 自定义事件调用
  	handleSearch() {
  		this.$request({
		  url: '/search?keywords=海阔天空'
		  }).then( res =>{
		    console.log(res);
		    this.infoList = res.data.result
		}) 
  	}
  }
}
</script>

本文纯属学习过程中的个人理解，如若不当之处，敬请评论指出。