uni-ajax使用示例

官网

基于 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>