antd design pro 网络交互请求和跨域问题
今天来聊一聊 antd design pro 网络交互请求这个小东东
前几天发布了一个关于antd design pro 环境搭建的文本教程，相学习的可以来这里找一找。
下面我们开始巴拉巴拉巴拉。
官网的一大堆废话就不说了，就三点 ：model， sevicers ，view（组件层）怎么关联和使用是关键。
1.servicers里你就放一些api的url请求地址就好，抽相为方法即可，也可以分不同文件存放具体的services。
我下面的就是在services文件下有分了个login目录，用来单独搞有关login的services，里面代码如下。
温馨提示：因为默认用的是fetch来封装的request，所以有些请求看下fetch api的标准，和axios比较起来比较麻烦。
import request from '@/utils/request';
export async function checkLogin(params:any) {
return request(`/oauth/token`,{method:"post", headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},body:`username=${params.username}&password=${params.password}&client_id=web&client_secret=secret&grant_type=password`});
}
export async function checkLoginUser(params:any) {
return request(`/user/current`,{method:"get", headers: {
'Authorization': `Bearer ${params}`}});
}
2.servicers都写完了，下一步就是model层了，在model里面调用相关services里面的方法就好了，因为我是自己分了一层login，所以我的model在@/services/login中。
import { stringify } from 'querystring';
import { history } from 'umi';
import {checkLogin,checkLoginUser} from '@/services/login';
const Model = {
namespace:'login',
state:{
access_token:null,
user_info:null
},
effects: {
*login({ payload } , {call ,put }){
const response= yield call(checkLogin,payload);
const user_info=yield call(checkLoginUser,response.access_token);
yield put({
type:'save',
access_token:response,
user_info:user_info
})
},},
reducers: {
save(state,action){
if (action.access_token.access_token) {
history.push('/welcome');
return{
...state,
access_token:action.access_token.access_token,
user_info:action.user_info
}
}
},
}
};
export default Model;
3.view层链接数据
@connect(({login,loading})=>({
access_token:login.access_token,
user_info:login.user_info,
loading
}))
export default class Login extends PureComponent {............
............
}
4.跨域解决 ：如果你现在发起一个网络请求，一定告诉你跨域，告诉你解决 ,config文件里面有config.ts。
proxy拦截然后再重新指向，但是这里要注意，和正常的后台的拦截不同这家伙会吧前拼接起来，例如：
'/oauth': {
target: 'https://aaa.bbbbb.com',
changeOrigin: true,
},
实际在请求时变成了 https://aaa.bbbbb.com/oauth .
// proxy: proxy[REACT_APP_ENV || 'dev'],
proxy: {
'/oauth': {
target: 'https://aaa.bbbbb.com',
changeOrigin: true,
},
'/user': {
target: 'https://ccc.ddddd.com',
changeOrigin: true,
},
'/api': {
target: 'https://eee.fffffff.com',
changeOrigin: true,
},
},