Vue项目封装请求数据的接口总结

Vue项目封装请求数据的接口总结

最近开始了第一份工作，对于前端新手小白，以前的惯用做法都是直接在需要的页面写请求数据的接口。但是因为项目中会频繁的请求后台，所以将所有的请求封装起来，方便管理。

一、配置url（可以放在一个js中）

1. 引入axios：import axios from “axios”
2. 配置url

                       const service=axios.create({

                                                 baseURL:请求的地址,

                                                 timeout:5000     //访问超时的时间限制

                      });

1. 抛出（如果是新起的js文件）：export default service;

二、写接口的文件（js文件）

1. 将配置url和axios引入：（例如配置的url文件叫request.js）

       2.配置各个接口：(例如叫business.js)

      Get请求：

                     export function testGet(参数){

                             return request({

                                       method:’get’,

                                       url:’具体接口’,

                                      params:{

                                             //json格式，如果有就写，没有就去掉。

                                     }

                            })

                   }

     Post请求：

                    export function testPost(参数){

                                const data={}  //写要传递的参数，json格式

                                return request({

                                         method:’post,

                                        url:’具体接口’,

                                       datatype:’json’,

                                       data

                               })

                    }

三、使用

       1.引入：import   {要引入的方法名字}   from   business.js

       2.使用

            TestGet().then(res=>{  //成功进这个 }).catch(err=>{ //报错进这个});

            放在当前页面使用的方法里。