export function createArt(data) {
return request({
url: '/article/create',
method: 'post',
data
})
}
这是在vue的项目中的一段代码,看不懂,怎么可以导出一个函数,这应该是导出
的是函数的返回值吧,也就是函数request()的结果,url里的路径,项目里根本就没有文件夹叫
article的呀,难道是动态生成的,下面的post是什么鬼,又不是发ajax请求,这种语法一般都是用来干什么的
post
应该就是制定http请求格式,然后调用Request对象的函数。要确定这一点,首先请把代码贴全了这并不是vue特有的语法,它是ES5的语法,ES5(ECMAScript)就是JavaScript,你可以理解就是JavaScript。
export function createArt(data) { // export是将函数、对象、常量等导出成模块(module)
return request({ //request是一个封装的ajax请求工具,最少需要传递url,url是后台的api接口地址,可能是java、python、.net等提供的。request()构造的是一个Promise对象,这是大家都默认的。
url: '/article/create', // ‘/article/create’看字面理解,就是创建一篇文字的接口
method: 'post', // method是HTTP请求的类型,类型可以有get、post、put、delete、option等等
data // data就是需要传递到后台的数据
})
}
祝你好运!
这个一看就是vue项目中的请求封装吧,你自己看看文件头部是不是有import request from ‘文件地址’,这样一串代码;
你去看看from的文件里面肯定有axios或者类似用于请求的模块;
若果有的话:
1.url 表示的不是什么文件地址,是你的请求地址
2.method:请求方式
3.data,你的请求体
为什么要这样封装,这方便于你整个项目对所有请求的管理。
这是一个api的统一管理部分request是作者自己封装的axios,你可以把它理解为就是ajax,axios就是在vue中的异步请求
import request from '@/utils/request' // 一般这里会引入自己封装好的request方法,可以根据不同的项目自行合理修改
// ****************所有app接口***************//
/**
* appAll
* @param {*} data
*/
export const appAll = (data) => {
return request({
url: '/channel/app',
method: 'post',
data
})
}
// ****************end***************//
使用方法
<template>
<div>
你的vue页面
</div>
</template>
<script>
import { appAll} from '@/api/app';
export default {
name: 'page' // 事例页面
methods:{
fnGetAllApp(){
appAll().then(resp => { // 这里就可以直接用引入的appAll
resp = resp.data;
if (resp.code == 0) {
// do something callback
}
});
}
}
}
</script>
附上axios的教程https://www.jianshu.com/p/c5b2b281c816
再附上一个我自己封装的requset删减版本
import axios from 'axios'
import {
Message
} from 'element-ui' // 这里取element作为ui样式库,如果不想用,删掉所有关于Message
// create an axios instance
axios.defaults.withCredentials = true // 这个值默认是false,但是如果后端接口想要写入cookie的话需要设置为true
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 30000, // request timeout 超时时间
transformRequest: [function(data) {
let ret = ''
for (const it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}]
})
// request interceptor
service.interceptors.request.use(
config => {
// do something before request is sent
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data
// 这里根据接口返回的code,和你们后端自己定义的错误码自行写逻辑,如果多了请使用switch
if (!res.success) {
Message({
message: '服务器离家出走了',
type: 'error',
duration: 6 * 1000
})
}
return response
}
}, error => {
Message({
message: error.msg,
type: 'error',
duration: 6 * 1000
})
return Promise.reject(error)
})
export default service