官网
基于 Promise 的轻量级 uni-app 网络请求库
uni-ajax官网:https://uniajax.ponjs.com
安装
插件市场
在 插件市场 右上角选择 使用 HBuilderX 导入插件 或者 下载插件 ZIP 。
// 引入
import ajax from '@/uni_modules/u-ajax/js_sdk'
npm
在项目开发中更推荐使用 npm 安装。
# 安装
npm install uni-ajax
# 更新
npm update uni-ajax
// 引入
import ajax from 'uni-ajax'
如果你的项目是 HBuilderX 创建，根目录又没有 package.json 文件的话，请先执行如下命令再安装：
npm init -y
项目根目录下创建 vue.config.js 文件。因为 uni-ajax 使用了 ES11 的新特性，所以需要通过项目 Babel 显式转译。
// vue.config.js
module.exports = {
transpileDependencies: ['uni-ajax']
}
准备
在根目录创建一个文件夹server
再创建两个文件,index.js,request.js
request.js
// 引入 uni-ajax 模块
import ajax from 'uni-ajax'
// 创建请求实例
const instance = ajax.create({
// 初始配置
baseURL: 'https://canberraautodetailing.com.au'
// baseURL: 'http://api.com/index.php'
// baseURL:'https://saying.api.azwcl.com/'
})
// 添加请求拦截器
instance.interceptors.request.use(
config => {
// 在发送请求前做些什么
// console.log('在发送请求前做些什么');
return config
},
error => {
// 对请求错误做些什么
// console.log('对请求错误做些什么');
return Promise.reject(error)
}
)
// 添加响应拦截器
instance.interceptors.response.use(
response => {
// 对响应数据做些什么
// console.log('对响应数据做些什么');
return response
},
error => {
// 对响应错误做些什么
// console.log('对响应错误做些什么');
return Promise.reject(error)
}
)
// 导出 create 创建后的实例
export default instance
index.js
import instance from './request.js';
export function Index(data = {}) {
return instance({
method: 'GET',
url: 'saying/get',
data,
});
}
export function Index2(data = {}) {
return instance({
method: 'POST',
url: 'Other/getdata',
data,
});
}
使用方法
在需要用到的文件内导入
<script>
import { Index2 } from '@/server/index.js'
export default {
data() {
return {
}
},
methods: {
set(){
Index2().then((res)=>{
console.log(res.data);
})
}
}
}
</script>
