手动创建元件封装的步骤,axios封装详解

axios axios是Vue工程开发项目中很受欢迎的ajax请求插件，内置开机自检、获取请求，大大减少前端开发工程师的代码量。 尽管如此，如果要开发比较大的项目还是很麻烦的，但本文论述了企业项目开发、axios要求的封装 为什么要对axios封装 可以更轻松地管理和修改axios请求域名。 即使是巨大的项目，修改域名也需要很多时间和精力。 封装axios可以省去很多步骤。 首先 在开始之前，安装axios和qs插件 在src目录中创建utils文件夹，并在其中创建request.js文件。 文件的完整内容如下 axios和qs插件importaxiosfrom ' axios ' importqsfrom ' QS '//全局通用域名const base URL=process.env.node _ env==' proroxxxxx

.com' : '； 创建axios实例let request=axios.create ({ base URL : base URL， //公共域名timeout:5000 //设置延迟时间(单位：毫秒) }阻止请求发送的request.interceptors.request.use (/阻止请求发送向请求头信息headers附加token令牌config={ config.headers.token=local storage }的返回配置}， err={promise.reject(err ) } ) request.interceptors.response.use ) /拦截响应请求，其中直接返回数据RES={returnreeerence} err={promise.reject(err ) }//axios实例对象request包含postURL方法request.posturl=function(URL，data， 添加选项={ }的异步处理returnnewpromise(function ) resolve，reject ) request ) URL:URL，method:'POST '，data 3360 quest charset=UTF-8 '， option.headers } }.then (RES=resolve (RES ) ).catch(err=reject(err ) )/reject

接下来

在src目录下创建api文件夹，然后创建user.js文件。 cjddx描述如何请求数据接口。 文件内容如下。 (因为是测试，所以只描述了几种方法。 ）

//导入请求配置文件importrequestfrom ' @/utils/request.js '//定义接口//let log in=function (数据) return request //注册letregister=function (数据) returnrequest.posturl ) (/member/xxxx )，数据； //let exit=function (数据) returnrequest.posturl ) (/member/xxxx )，数据； //获取用户信息let getuser=function (数据) returnrequest.get ) )/member/xxxx )，数据) }export ) login，register

//注册的方法import { log in } from ' @/API/user.js ' log in (注册信息).then ) RES={ console.log (RES ) } ) catch ) err=后期' https://www.xxxx.com' : '； 也就是说，全局更改域名