postMessage的基础用法
时间: 2024-01-05 12:17:09 浏览: 27
postMessage是HTML5中新增的API,用于在不同的窗口、标签页或者iframe之间传递数据。它的基础用法如下:
在发送消息的窗口中调用postMessage方法:
```
window.postMessage(message, targetOrigin);
```
其中,message是要发送的消息,可以是字符串、数字、对象等;targetOrigin是目标窗口的源,可以是字符串"*"(表示不限制源)或者具体的源(比如"http://example.com")。
在接收消息的窗口中监听message事件:
```
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
// event.data就是发送过来的消息
// event.origin就是发送窗口的源
}
```
当接收到消息时,会触发message事件,事件对象event包含发送过来的消息event.data和发送窗口的源event.origin。
相关问题
nestjs 实现post请求第三方接口
要实现 NestJS 中的 POST 请求第三方接口, 可以使用 NestJS 中提供的 `HttpService` 模块。
首先,你需要在你的 NestJS 应用程序中引入 `HttpModule`,以便能够使用 `HttpService`:
```typescript
import { HttpModule, HttpService } from '@nestjs/common';
import { Module } from '@nestjs/common';
@Module({
imports: [HttpModule],
})
export class AppModule {}
```
接下来,在你的服务或控制器中注入 `HttpService`:
```typescript
import { Controller, Get, HttpService, Post } from '@nestjs/common';
@Controller('example')
export class ExampleController {
constructor(private readonly httpService: HttpService) {}
@Post()
async postExample() {
const data = { message: 'Hello World!' };
const response = await this.httpService.post('https://example.com/api', data).toPromise();
return response.data;
}
}
```
在上面的示例中,我们向 `https://example.com/api` 发送了一个 POST 请求,并传递了一个包含 `message` 属性的数据对象。我们使用 `toPromise()` 方法将 `Observable` 转换为 `Promise`,以便我们可以使用 `await` 等待响应。
这就是如何在 NestJS 中实现 POST 请求第三方接口的基础知识。
vue2中对 Axios 进行更加细致的封装,例如封装 get、post 等方法,统一处理错误信息等。
Vue2 中对 Axios 进行细致的封装可以通过创建一个 Axios 实例来实现。下面是一个简单的封装示例:
```javascript
import axios from 'axios'
import { Message } from 'element-ui'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config
},
error => {
// 对请求错误做些什么
console.log(error) // for debug
Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
response => {
// 对响应数据做点什么
const res = response.data
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
// 对响应错误做点什么
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
```
在这个示例中,我们首先导入了 Axios 和 Element UI 的 Message 组件。接着创建了一个 Axios 实例 `service`,并设置了基本的配置项,如请求的基础 URL 和超时时间。然后,我们对请求和响应进行了拦截处理,统一处理了错误信息,并通过 Promise.reject 返回了错误信息。
在 Vue 组件中使用这个封装好的 Axios 实例,只需要导入即可:
```javascript
import request from '@/utils/request'
export function fetchList(query) {
return request({
url: '/list',
method: 'get',
params: query
})
}
export function createItem(data) {
return request({
url: '/create',
method: 'post',
data
})
}
```
在这个示例中,我们通过 `request` 方法来发送 HTTP 请求,而不是直接使用 Axios。`request` 方法会自动将参数传递给 Axios 实例,从而实现了对 Axios 的细致封装。