vue封装axios接口

1、安装axios

axios安装命令：cnpm install axios

2、在文件中引用axios

一开始我是放在src下的main.js这个文件里面，后来发现mounted钩子读取接口方法为undefined，百度了才发现是vue生命周期的缘由，最好的解决办法是把axios单独抽取出来放在另一个文件中，为此我在src下新建了一个api文件夹，文件名为main.js(名字任意取)

引用axios

import axios from 'axios'
import qs from 'qs'   //qs库-->做用是格式化数据

 

3、接口请求配置

var TIME_OUT = 50000;  //若是请求的时间超过'timeout'，请求将被停止
var st_base_prefix = 'http://shira1.midea.com:1002';
const base_axios_options = {
headers:{ 'content-type': 'application/json' },
timeout:5000,
withCredentials:true,  //是否跨站点访问控制请求
};

 

 

4、接口封装

const org_base = `${st_base_prefix}/st-sys/authority`;
const orgAxios = axios.create(Object.assign({},{ baseURL:org_base },base_axios_options));
export const orgModuleApi={
save:(params)=>{
　　return orgAxios.post('/sysOrg/save',params).then(res=>res.data);
},
getByPage:(params)=>{
　　return orgAxios.post('/sysOrg/getByPage?'+qs.stringify(params)).then(res=>res.data);
},
test:(params)=>{
　　//return "test";
　　return orgAxios.get('/sysOrg/test',params).then(res=>res.data);
}
}

 

 

以上的代码全都是写在api-->main.js中

 

 

5、页面中调用接口

<script>
import {orgModuleApi} from '../../../api/main.js';
export default(){
　　data(){
　　　　return{

　　　　}
　　},
　　methods:{
　　　　getByPage(){
　　　　　　orgModuleApi.getByPage({pageNo:this.pageNo,pageSize:this.pageSize}).then(res=>{
　　　　　　　　if(res.code){
　　　　　　　　　　console.log("123");
　　　　　　　　}
　　　　　　})
　　　　},
　　　　getTest(){
　　　　　　orgModuleApi.test().then(res=>{
　　　　　　　　if(res.code){
　　　　　　　　　　console.log('success');
　　　　　　　　}
　　　　　　})
　　　　}
　　},
　　mounted(){
　　　　this.getByPage();
　　　　this.getTest();
　　}
}
</script>