axios的封装

1 封装的axios.js放在utils下面,utils是配置文件(baseURL表示请求url公共部分)

（一） 
1 import axios from 'axios'
 2 import qs from 'qs'
 3 axios.defaults.baseURL = process.env.NODE_ENV==='production'?'/.../api':'/'
 4 axios.defaults.timeout= 20000;
 5 axios.defaults.headers={'content-Type':'application/x-www-form-urlencoded;charset=UTF-8'};
 6 
 7 const service=axios.create();
 8 
 9 service.interceptors.request.use(function (config) {
10   config.method === 'POST' ?
11     config.data = qs.stringify({...config.data}) :
12     config.params = ({...config.params});
13   return config
14 },error => {
15 
16 });
17 
18 // 拦截器，拦截请求之后，数据返回之前
19 service.interceptors.response.use(
20   respones => {
21     // console.log(respones)
22     return respones.data
23   },
24   error => {
25     Promise.reject(error)
26   }
27 );
28 export default service

 （二）

 1 import axios from 'axios'
 2 import qs from 'qs'
 3 axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? '/qdwe' : '/api'
 4 axios.defaults.timeout = 20000
 5 const service = axios.create({
 6     retry: 2 ,// 请求次数,
 7     retryInterval: 1000 // 请求超时后，1s再次请求
 8 })
 9 
10 service.interceptors.request.use(function (config) {
11     // 请求之前的处理,token,(js-cookie),store处理
12     config.method === 'POST'
13         ? config.data = qs.stringify({...config.data})
14         : config.params = {...config.params};
15     config.headers['Content-type'] = 'application/x-www-form-urlencoded;chartset=UTF-8'
16     return config
17 }, function (error) {
18     return Promise.reject(error)
19 })
20 
21 service.interceptors.response.use(
22     response => {
23 
24         if (response.status === 200) {
25             return response.data
26         } else if (response.status === 500) {
27             //
28             //console.log('0000')
29         }
30     } ,
31     error => {
32         //console.log(error)
33         //  请求超时,处理
34         const config = error.config
35         if(!config || !config.retry) return Promise.reject(error)
36         // 重新请求次数
37         config.retryCount = config.retryCount || 0
38         // 请求次数是否上限
39         if(config.retryCount >= config.retry){
40             return Promise.reject(error)
41         }
42         config.retryCount += 1
43         // 重新发起请求
44         const back = new Promise(function(resolve){
45             setTimeout(() => {
46                 resolve()
47             },config.retryInterval || 1)
48         })
49         // 返回axios实体
50         return back.then(() => {
51             return service(config)
52         })
53     }
54 )
55 
56 export default service
View Code

 

2 新建文件夹request,下一级新建api.js文件 (用于全局使用)

 1 import service from  '../utils/axios'
 2 // POST请求对的参数放在data,GET请求放在params
 3 export const info = (id) =>{
 4   return service({
 5     url: '  ',
 6     method: 'GET',
 7     params:{
 8       prisonsId : id
 9     }
10   })
11 }

3 需要调用接口的页面

 1 <script>
 2 import { info} from "../request/api";
 3 
 4 data(){
 5 return{
 6   kssData()
 7 }
 8 }
 9  created(){
10       info(this.pageIndex).then(res => {
11         // console.log('res',res);
12         this.kssData = res.data
13       }).catch(err => {
14       });
15 }
16 </script>

 

posted @ 2019-06-21 16:09  甜甜的小可爱ha  阅读(485)  评论(0)  编辑  收藏  举报