vue封装接口

JavaScript024

vue封装接口,第1张

封装接口

首先创建一个idnex.js文件

import axios from 'axios'

/* 创建一个axios实例化对象instance */

var instance = axios.create({

/* 基础路径 /

baseURL: 'url‘,

/设置超时时间 */timeout: 5000})

instance.interceptors.request.use(

config =>{

localStorage.token &&(config.headers.Authorization = localStorage.token)

return config

},

error =>{

return Promise.error(error)

}

)

axios.interceptors.response.use(response =>{

return response

},

error =>{

return error

})

/* 参数methods默认值是get,path表示具体路径,post需要给data传参默认值是空对象 get请求需要给params传参默认值是空对象 */

export const httpServe = (path,params={},method="get",data={})=>{

return new Promise((resolve,reject)=>{

instance({

method,

url:path,

params,/* get方法 */

data/* post方法 */

})

.then(res=>{

resolve(res)

})

.catch(err=>{

reject(err)

})

})

}

然后创建request.js文件写方法

import {httpServe} from '@/http/index.js'

/* 登录 */

export const loginPost = (path,data)=>httpServe(path,{},'post',data)

/* 用户列表 */

export const usersGet = (path,params)=>httpServe(path,params)

/* 获取左侧菜单列表 */

export const menusGet = (path,params)=>httpServe(path,params)

/* 添加用户 */

export const addusersPost = (path,data)=>httpServe(path,{},'post',data)

Vue 的 createElement 方法,简单的封装一个组件解决问题。

解决方法

第一版代码(直接在操作 Dom )如下:

export default {

mounted() {

const s = document.createElement('script')

s.type = 'text/javascript'

s.src = 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js'

document.body.appendChild(s)

},

}

使用 createElement 方法:

export default {

components: {

'dingtalk': {

render(createElement) {

return createElement(

'script',

{

attrs: {

type: 'text/javascript',

src: 'https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js',

},

},

)

},

},

},

}

// 使用在页面中调用

终极方案

通过封装一个组件 remote-js 实现:

export default {

components: {

'remote-js': {

render(createElement) {

return createElement('script', { attrs: { type: 'text/javascript', src: this.src }})

},

props: {

src: { type: String, required: true },

},

},

},

}

使用方法:

<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">remote-js>

效果图:

1:先创建组件,并创建index.js文件

tosi.vue文件

index.js文件

2:在main.js里面进行挂载注册

3:进行调用