vue中如何调取api_vue项目中api接口使用详解

这次给大家带来vue项目中api接口使用详解，vue项目中api接口使用的注意事项有哪些，下面就是实战案例，一起来看一下。

默认vue项目中已经使用vue-cli生成，安装axios，基于element-ui开发，axiosconfig目录和api目录是同级，主要记录配置的相关。

1. 在axiosconfig目录下的axiosConfig.jsimport Vue from 'vue'

import axios from 'axios'

import qs from 'qs'

import { Message, Loading } from 'element-ui'

// 响应时间

axios.defaults.timeout = 5 * 1000

// 配置cookie

// axios.defaults.withCredentials = true

// 配置请求头

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 静态资源

Vue.prototype.$static = ''

// 配置接口地址

axios.defaults.baseURL = ''

var loadingInstance

// POST传参序列化(添加请求拦截器)

axios.interceptors.request.use(

config => {

loadingInstance = Loading.service({

lock: true,

text: '数据加载中，请稍后...',

spinner: 'el-icon-loading',

background: 'rgba(0, 0, 0, 0.7)'

})

if (config.method === 'post') {

config.data = qs.stringify(config.data)

}

return config

},

err => {

loadingInstance.close()

Message.error('请求错误')

return Promise.reject(err)

}

)

// 返回状态判断(添加响应拦截器)

axios.interceptors.response.use(

res => {

if (res.data.code === 200) {

loadingInstance.close()

return res

} else {

loadingInstance.close()

Message.error(res.data.msg)

}

},

err => {

loadingInstance.close()

Message.error('请求失败，请稍后再试')

return Promise.reject(err)

}

)

// 发送请求

export function post (url, params) {

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

axios

.post(url, params)

.then(

res => {

resolve(res.data)

},

err => {

reject(err.data)

}

)

.catch(err => {

reject(err.data)

})

})

}

export function get (url, params) {

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

axios

.get(url, {

params: params

})

.then(res => {

resolve(res.data)

})

.catch(err => {

reject(err.data)

})

})

}

2. 在api目录下的index.js,api1.js,api2.jsapi1.js

import { post } from '../axiosconfig/'

export default {

login(params) {

return post('/users/api/login', params)

}

}

api2.js

import { post } from '../axiosconfig/'

export default {

regist(params) {

return post('/users/api/regist', params)

}

}

index.js

import user from './api1.js'

import active from './api2.js'

export default {

api1,

api2

}

3. main.js 配置import api from './api/'

Vue.prototype.$api = api

4. 在组件中使用登录组件中

doLongin() {

let params={}

this.$api.api1.login(params).then(res => {

console.log(res)

})

}

注册组件中

doRegist() {

let params={}

this.$api.api2.regist(params).then(res => {

console.log(res)

})

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：